JS获取checkbox的个数简单实例


Posted in Javascript onAugust 19, 2016

JS获取多选框checkbox被选中的个数。

var checkbox = document.getElementsByName("likes[]"); 
//此处通过此种方式才能获得多选框为数组。
                                            
//like为name = "like[]" , 获得时必须加上[]
var checked_counts = 0;

for(var i=0;i<checkbox.length;i++){
if(checkbox[i].checked){     //被选中的checkbox
checked_counts++;
}
}

alert(checked_counts);

 我做的是每点击一下多选框就判断当前checked个数是否超过某个数值

function checkDate(){ 
  var n = $("#cart_q_num").val(); 
   var checkedCount=0; 
   var checkbox = document.getElementsByName("tie_in[]");
   //alert(checkbox.length);
   for(var i=0;i<checkbox.length ;i ++){ 
   if(checkbox[i].checked){ 
     checkedCount++; 

     } 
   } 
   //alert(checkedCount);
    if(checkedCount>n){ 
       alert("The quantity of the gifts should equal to the quantity of the sunglasses set."); 
      return false; 
   }else{
     $("#free_pro_selected_num").html(checkedCount);
    }
}

要使函数checkdata()每次点击都发挥作用,需要在checkbox框中添加onclick事件:

<input type="checkbox" name="tie_in[]" value="1" onClick="return checkData()" />

以上这篇JS获取checkbox的个数简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
妙用Jquery的val()方法
Jun 27 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
js改变Iframe中Src的方法
May 05 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 #Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 #Javascript
浅谈js中test()函数在正则中的使用
Aug 19 #Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 #Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 #Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 #Javascript
AngularJS入门教程之更多模板详解
Aug 19 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
超级强大的表单验证
2006/06/26 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python温度转换华氏温度实现代码
2020/12/06 Python
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
Linux的文件类型
2012/03/07 面试题
毕业自我鉴定范文
2013/11/06 职场文书
《假如》教学反思
2014/04/17 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014年工人工作总结
2014/11/25 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers