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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
window.open()实现post传递参数
Mar 12 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
struct与class的区别
2014/02/03 面试题
运动会入场解说词
2014/02/07 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
初中语文教师研修日志
2015/11/13 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android