编程 Javascript

JQuery勾选指定name的复选框集合并显示的方法

Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery勾选指定name的复选框集合并显示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 $("input[name='love']").click(function () {
 //获得所有name为love的选中的复选框
 var $Checks = $("input[name='love']:checked");
 var arr = new Array();
 //使用了元素的each方法
 //循环Jquery对象里的dom数组
 $Checks.each(function (index, value) {
  //alert(value);
  arr[index] = value.value;
 });
 $("#MessageInfo").text("你选择了"+arr.length+"个爱好,"+arr.join(","));
 });
});
</script>
</head>
<body>
<input type="checkbox" name="love" value="FootBall" />足球
<input type="checkbox" name="love" value="BasketBall" />篮球
<input type="checkbox" name="love" value="VallyBall" />排球
<p id="MessageInfo"></p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript,jquery闭包概念分析

Jun 19 Javascript

jquery实现div拖拽宽度示例代码

Jul 31 Javascript

js关闭浏览器窗口及检查浏览器关闭事件

Sep 03 Javascript

JS组件Bootstrap Table表格行拖拽效果实现代码

Aug 27 Javascript

jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

Jun 08 Javascript

js鼠标单击和双击事件冲突问题的快速解决方法

Jul 11 Javascript

Vue进度条progressbar组件功能

Apr 17 Javascript

npm全局模块卸载及默认安装目录修改方法

May 15 Javascript

JavaScript：ES2019 的新特性(译)

Aug 08 Javascript

使用Angular material主题定义自己的组件库的配色体系

Sep 04 Javascript

js中Function引用类型常见有用的方法和属性详解

Dec 11 Javascript

JS使用Chrome浏览器实现调试线上代码

Jul 23 Javascript

JavaScript的9种继承实现方式归纳

May 18 #Javascript

JQuery中上下文选择器实现方法

May 18 #Javascript

JQuery中两个ul标签的li互相移动实现方法

May 18 #Javascript

JQuery球队选择实例

May 18 #Javascript

JQuery实现动态添加删除评论的方法

May 18 #Javascript

TypeError document.getElementById(...) is null错误原因

May 18 #Javascript

JQuery实现带排序功能的权限选择实例

May 18 #Javascript