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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
跟我学习javascript的循环
Nov 18 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
微信小程序实现点击页面出现文字
Sep 21 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
Codeigniter检测表单post数据的方法
2015/03/21 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
JavaScript 继承的实现
2009/07/09 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
python求素数示例分享
2014/02/16 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python Django批量导入不重复数据
2016/03/25 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python发送告警邮件脚本
2018/09/17 Python
实例介绍Python中整型
2019/02/11 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
一套英文Java笔试题面试题
2016/04/21 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
采购部部长岗位职责
2014/02/06 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
小学六一主持词开场白
2015/05/28 职场文书
关于五一放假的通知
2015/08/18 职场文书