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 基础篇(一)
Mar 30 Javascript
js快速排序的实现代码
Dec 08 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue中如何实现变量和字符串拼接
Jun 19 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Node.js 的模块知识汇总
Aug 16 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
原生js+ajax分页组件
Jan 30 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中使用XML
2006/10/09 PHP
使用adodb lite解决问题
2006/12/31 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
dojo 之基础篇
2007/03/24 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python生成指定长度的随机数密码
2014/01/23 Python
python实现的系统实用log类实例
2015/06/30 Python
更新修改后的Python模块方法
2019/03/03 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python轮询机制控制led实例
2020/05/03 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
初入社会应届生求职信
2013/11/18 职场文书
经典大学生求职信范文
2014/01/06 职场文书
大学生暑期实践感言
2014/02/26 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
总经理年会致辞
2015/07/29 职场文书
《确定位置》教学反思
2016/02/18 职场文书