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中执行任意html代码的方法示例解读
Dec 25 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
详解redux异步操作实践
Aug 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
Vue 递归多级菜单的实例代码
May 05 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js实现抽奖效果
2017/03/27 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python实现快速排序的方法详解
2019/10/25 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
快速了解Python开发环境Spyder
2020/06/29 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
黄河象教学反思
2014/02/10 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
运动会拉拉队口号
2014/06/09 职场文书
优秀班组申报材料
2014/12/25 职场文书
歌剧魅影观后感
2015/06/05 职场文书
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python