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 hashtable 修正版 下载
Dec 30 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
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
漂亮但不安全的CTB
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python重试装饰器示例
2014/02/11 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
刑事附带民事代理词
2015/05/25 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
python语言中pandas字符串分割str.split()函数
2022/08/05 Python