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下jstree简单应用 - v1.0
Apr 14 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
关于crontab的使用详解
2013/06/24 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
JS高级运动实例分析
2016/12/20 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
序列化模块json代码实例详解
2020/03/03 Javascript
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
阿里旅行:飞猪
2017/01/05 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
规划编制实施方案
2014/03/15 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
宣传标语大全
2014/07/01 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis