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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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中返回引用类型的方法
2015/04/03 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python实现下载整个ftp目录的方法
2017/01/17 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
大学毕业感言100字
2014/02/03 职场文书
火锅店营销方案
2014/02/26 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
导游词幽默开场白
2019/06/26 职场文书