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批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
详解vue.js的devtools安装
May 26 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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的FTP学习(二)
2006/10/09 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python实现共轭梯度法
2019/07/03 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
银行委托书范本
2014/04/04 职场文书
党性教育心得体会
2014/09/03 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
mysql查看表结构的三种方法总结
2022/07/07 MySQL
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers