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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 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
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
ipython和python区别详解
2019/06/26 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python的形参和实参使用方式
2019/12/24 Python
python实现梯度法 python最速下降法
2020/03/24 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
公司部门司机岗位职责
2014/01/03 职场文书
师范学院教师自荐书
2014/01/31 职场文书
骨干教师培训方案
2014/05/06 职场文书
2014中考励志标语
2014/06/05 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
法院授权委托书格式
2014/09/28 职场文书
python随机打印成绩排名表
2021/06/23 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS