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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
TS 类型兼容教程示例详解
Sep 23 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
杏林同学录(二)
2006/10/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
js闭包学习心得总结
2018/04/17 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python的unittest测试类代码实例
2017/12/07 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
求职自荐信
2013/12/14 职场文书
心得体会范文
2014/01/04 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
交通事故协议书
2014/04/15 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
专家推荐信范文
2015/03/26 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
收入证明怎么写
2015/06/12 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书