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自带函数备忘 数组
Dec 29 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
浅析java线程中断的办法
Jul 29 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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
使用adodb lite解决问题
2006/12/31 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python制作爬虫抓取美女图
2016/01/20 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python调用飞书发送消息的示例
2020/11/10 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
学习决心书范文
2014/03/11 职场文书
python元组打包和解包过程详解
2021/08/02 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
python运行脚本文件的三种方法实例
2022/06/25 Python