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获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
js事件触发操作实例分析
Jun 21 Javascript
微信小程序实现点击效果
Jun 21 Javascript
详解Typescript里的This的使用方法
Jan 08 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三元运算符的结合性介绍
2012/01/10 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python三大神器之fabric使用教程
2019/06/10 Python
python自动化之Ansible的安装教程
2019/06/13 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
python 数据类型强制转换的总结
2021/01/25 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
毕业生求职简历的自我评价
2013/10/23 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
酒店总经理工作职责
2013/12/13 职场文书
书法培训心得体会
2014/01/05 职场文书
个人工作总结范文2014
2014/11/07 职场文书
鲁迅故里导游词
2015/02/05 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
SpringBoot快速入门详解
2021/07/21 Java/Android