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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js分页代码分享
Apr 28 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
Node.js API详解之 zlib模块用法分析
May 19 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
php google或baidu分页代码
2009/11/26 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
js获取url传值的方法
2015/12/18 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
使用python实现接口的方法
2017/07/07 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python判断设备是否联网的方法
2018/06/29 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
客服服务心得体会
2013/12/30 职场文书
党员入党表决心的话
2014/03/11 职场文书
六个一活动实施方案
2014/03/21 职场文书
意向书范文
2014/03/31 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书