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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
vue实现单选和多选功能
Aug 11 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
Vue在页面数据渲染完成之后的调用方法
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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
node.js通过url读取文件
2020/10/16 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
物流专业大学生的自我鉴定
2013/11/13 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS