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 相关文章推荐
JScript的条件编译
May 29 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
php搜索文件程序分享
2015/10/30 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
javascript事件模型代码
2007/07/01 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
班级活动策划书
2014/02/06 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
迎新晚会主持词
2014/03/24 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
幼师辞职信范文
2015/02/27 职场文书
自主招生自荐信格式
2015/03/04 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL