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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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学习之PHP表达式
2006/10/09 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
webpack入门必知必会
2017/01/16 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
医学生个人求职信范文
2013/09/24 职场文书
考试诚信承诺书
2014/05/23 职场文书
应届生自荐信
2014/06/30 职场文书
区域经理岗位职责
2015/02/02 职场文书
2019各种承诺书范文
2019/06/24 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Golang的继承模拟实例
2021/06/30 Golang
python代码实现备忘录案例讲解
2021/07/26 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python