jquery统计复选框选中示例


Posted in Javascript onNovember 05, 2013

以前我使用js只能判断遍历再获取

<!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>
<title>jQuery判断复选框的选中个数</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
 var btn = document.getElementById("btn");  //获取id为btn的元素(button)
 btn.onclick = function(){  //给元素添加onclick事件
  var arrays = new Array();   //创建一个数组对象
  var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
  for(i=0; i < items.length; i++){  //循环这组数据
   if(items[i].checked){      //判断是否选中
    arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
   }
  }
  alert( "选中的个数为:"+arrays.length  );
 }
}
</script>
</head>
<body>
<form method="post" action="#">
 <input type="checkbox" value="1" name="check" checked="checked"/>
 <input type="checkbox" value="2" name="check" />
 <input type="checkbox" value="3" name="check" checked="checked"/>
 <input type="button" value="你选中的个数" id="btn"/>
</form>
</body>
</html>
 

通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数。
<script Language="JScript">
function check(){
var boxArray = document.getElementsByName('oBox');
var total = 0;
for(var i=0;i<boxArray.length;i++){
if(boxArray[i].checked){
total++;
}
}
if(total>0){
  if(window.confirm('共选中'+total+'首歌,是否继续?')){
    window.open('about:blank','SubWin','');
    return true;
  }
  else{
    return false;
  }
}
else{
window.alert('没有选择!') ; 
return false;
}
}
</script>
<form target="SubWin" onsubmit="return check();">
<input type="checkbox" name="oBox">歌曲一
<input type="checkbox" name="oBox">歌曲二
<input type="checkbox" name="oBox">歌曲三
<input type="button" value="看看">
</form>
 
Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
jquery实现滑动图片自己测试的例子
Nov 05 #Javascript
用js实现in_array的方法
Nov 05 #Javascript
jquery遍历数组与筛选数组的方法
Nov 05 #Javascript
javascript alert乱码的解决方法
Nov 05 #Javascript
jquery三个关闭弹出层的小示例
Nov 05 #Javascript
jquery ajax post提交数据乱码
Nov 05 #Javascript
jquery ajax属性async(同步异步)示例
Nov 05 #Javascript
You might like
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
哪些是python中web开发框架
2020/06/17 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
秘书岗位职责
2013/11/18 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
机械个人求职信范文
2014/01/24 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
初中班级口号
2014/06/09 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers