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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
vue实现简单loading进度条
Jun 06 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python上下文管理器和with块详解
2017/09/09 Python
python连接数据库的方法
2017/10/19 Python
tornado 多进程模式解析
2018/01/15 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
基于python实现查询ip地址来源
2020/06/02 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
视图的作用
2014/12/19 面试题
Delphi软件工程师试题
2013/01/29 面试题
全神贯注教学反思
2014/02/03 职场文书
优秀教师个人材料
2014/12/15 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python