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 一个函数对同一元素的多个事件响应
Jul 25 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
JS实现手风琴特效
Nov 08 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 可阅读随机字符串代码
2010/05/26 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
详解微信第三方小程序代开发
2017/06/23 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
师范生教师实习自我鉴定
2013/09/27 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
公司欠款证明
2015/06/24 职场文书
清明节主题班会
2015/08/14 职场文书
MySQL基础(二)
2021/04/05 MySQL
使用Python获取字典键对应值的方法
2022/04/26 Python
在python中读取和写入CSV文件详情
2022/06/28 Python