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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
brook javascript框架介绍
Oct 10 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
js date 格式化
Feb 15 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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安全配置 如何配置使其更安全
2011/12/16 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python安装第三方库的3种方法
2015/06/21 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
mysql有关权限的表都有哪几个
2015/04/22 面试题
商场端午节活动方案
2014/01/29 职场文书
应聘教师自荐信
2015/03/26 职场文书
改造DE1103三步曲
2022/04/07 无线电