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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
JavaScript仿京东轮播图效果
Feb 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函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
分享Python字符串关键点
2015/12/13 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
3种python调用其他脚本的方法
2020/01/06 Python
简单了解Python write writelines区别
2020/02/27 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python用Configobj模块读取配置文件
2020/09/26 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
年终考核评语
2014/01/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
个人简历自荐信
2014/06/26 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL