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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
React快速入门教程
Jan 17 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python决策树之C4.5算法详解
2017/12/20 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
学生思想表现的评语
2014/01/30 职场文书
英文自荐信常用句子
2014/03/26 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
锅炉工岗位职责
2015/02/13 职场文书
爱国主义电影观后感
2015/06/18 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
课题研究阶段性总结
2015/08/13 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
Java对文件的读写操作方法
2022/04/29 Java/Android
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL