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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
javascript import css实例代码
Jul 18 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
前端必学之PHP语法基础
2016/01/01 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
javascript实现日历效果
2019/06/17 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
PyQt5实现登录页面
2020/05/30 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
老师的检讨书
2014/02/23 职场文书
员工培训协议书
2014/09/15 职场文书
付款承诺函范文
2015/01/21 职场文书
如何写辞职书
2015/02/26 职场文书
实践论读书笔记
2015/06/29 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang