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 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jquery构造器的实现代码小结
May 16 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
Javascript实现计算个人所得税
May 10 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
基于openlayers4实现点的扩散效果
Aug 17 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信小程序实现星级评价
2019/11/20 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python CSV模块使用实例
2015/04/09 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python如何生成树形图案
2018/01/03 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python实现ID3决策树算法
2018/08/29 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
会计专业自我评价
2014/02/12 职场文书
上课看小说检讨书
2014/02/22 职场文书
手机被没收的检讨书
2014/10/04 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年优秀党员材料
2014/12/18 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
关于JavaScript轮播图的实现
2021/11/20 Javascript