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 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
js propertychange和oninput事件
2014/09/28 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python批量下载抖音视频
2019/06/17 Python
Python多线程获取返回值代码实例
2020/02/17 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
房屋产权证明书
2015/06/19 职场文书
高一作文之乐趣
2019/11/21 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA