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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
react项目实践之webpack-dev-serve
Sep 14 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
帝国cms目录结构分享
2015/07/06 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
理解javascript异步编程
2016/01/27 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python aiohttp的使用详解
2019/06/20 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
应届中专生自荐书范文
2014/02/13 职场文书
婚前财产公证书
2014/04/10 职场文书
考察现实表现材料
2014/05/19 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS