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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
iconfont的三种使用方式详解
Aug 05 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 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 使用post,get的一种简洁方式
2010/04/25 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python中类型检查的详细介绍
2017/02/13 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python unittest实现api自动化测试
2018/04/04 Python
Python魔法方法详解
2019/02/13 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
python 伯努利分布详解
2020/02/25 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
作文评语集锦
2014/12/25 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
国庆节主题班会
2015/08/15 职场文书
班主任寄语2016
2015/12/04 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python