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 相关文章推荐
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
yii添删改查实例
2015/11/16 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
Python3多线程操作简单示例
2018/05/22 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
知识竞赛活动方案
2014/02/18 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2014会计年终工作总结
2014/12/20 职场文书
银行给客户的感谢信
2015/01/23 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
虎兄虎弟观后感
2015/06/12 职场文书