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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
实现获取http内容的php函数分享
2014/02/16 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
js 判断 enter 事件
2009/02/12 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python2与python3共存问题的解决方法
2018/09/18 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
介绍一下游标
2012/01/10 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
nohup的用法
2014/08/10 面试题
户籍证明的格式
2014/01/13 职场文书
学生爱国演讲稿
2014/01/14 职场文书
建筑工地文明标语
2014/10/09 职场文书
授权委托书协议书
2014/10/16 职场文书
学困生转化工作总结
2015/08/13 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书