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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
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
19个Android常用工具类汇总
2014/12/30 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Js面试算法详解
2018/04/08 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
js cavans实现静态滚动弹幕
2020/05/21 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
常见python正则用法的简单实例
2016/06/21 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
实现Python与STM32通信方式
2019/12/18 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
JPA的特点
2014/10/25 面试题
司法所长先进事迹
2014/06/02 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
青岛导游词
2015/02/12 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers