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 常用代码技巧大收集
Feb 25 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
VUE中使用MUI方法
Feb 12 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
详解JavaScript 高阶函数
Sep 14 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
jQuery冲突问题解决方法
2021/01/19 jQuery
python中关于日期时间处理的问答集锦
2013/03/08 Python
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python实现控制台打印的方法
2019/01/12 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
安全生产责任书
2014/03/12 职场文书
法律进社区实施方案
2014/03/21 职场文书
工会主席事迹材料
2014/06/03 职场文书
党章培训心得体会
2014/09/04 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
企业安全生产规章制度
2015/08/06 职场文书
趣味运动会广播稿
2015/08/19 职场文书