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 01 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
微信小程序异步处理详解
Nov 10 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python实现简单成绩录入系统
2019/09/19 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
手机促销活动方案
2014/02/05 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
服务理念标语
2014/06/18 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书