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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
Express的路由详解
Dec 10 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
vue-cropper组件实现图片切割上传
May 27 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
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
JavaScript 常用函数
2009/12/30 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Python中的 enum 模块源码详析
2019/01/09 Python
详解python中*号的用法
2019/10/21 Python
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
Java基础知识面试要点
2016/07/29 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
自主招生自荐信格式
2013/12/03 职场文书
cf搞笑广告词
2014/03/14 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
单位收入证明范本
2015/06/18 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
话题作文之生命的旋律
2019/12/17 职场文书