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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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自动跳转中英文页面
2008/07/29 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
车间班长岗位职责
2013/11/30 职场文书
高三自我评价
2014/02/01 职场文书
《尊严》教学反思
2014/02/11 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
《赶海》教学反思
2014/04/20 职场文书
抽样调查项目计划书
2014/04/24 职场文书
党员公开承诺书内容
2014/05/20 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
银行给客户的感谢信
2015/01/23 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
经销商会议开幕词
2016/03/04 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技