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 GridView 实现自动计算操作代码
Mar 25 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python和C语言混合编程实例
2014/06/04 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
使用matplotlib画散点图的方法
2018/05/25 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
浅析Python 多行匹配模式
2020/07/24 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
户外拓展活动方案
2014/02/11 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
品质标语大全
2014/06/21 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
详解Python requests模块
2021/06/21 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android