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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
You might like
我的群发邮件程序
2006/10/09 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JS处理一些简单计算题
2018/02/24 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Django中几种重定向方法
2015/04/28 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python正则实现计算器功能
2017/12/14 Python
Python for循环中的陷阱详解
2018/07/13 Python
python 接收处理外带的参数方法
2018/12/03 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
详解pandas映射与数据转换
2021/01/22 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
邮政员工辞职信
2014/01/16 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL