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的checkbox下拉框插件代码
Jun 25 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
老生常谈js数据类型
2017/08/03 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
javascript的this关键字详解
2019/05/20 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python简单贪吃蛇开发
2019/01/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
自荐信的基本格式
2014/02/22 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015年招聘工作总结
2014/12/12 职场文书
实习介绍信范文
2015/05/05 职场文书
2015年教师节广播稿
2015/08/19 职场文书
工商局调档介绍信
2015/10/22 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers