JS获取checkbox的个数简单实例

 更新时间:2016年08月19日 09:59:38   投稿:jingxian  
下面小编就为大家带来一篇JS获取checkbox的个数简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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的个数简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • uniapp自定义网络检测组件项目实战总结分析

    uniapp自定义网络检测组件项目实战总结分析

    这篇文章主要为大家介绍了uniapp自定义网络检测组件项目实战总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 判断滚动条滑到底部触发事件(实例讲解)

    判断滚动条滑到底部触发事件(实例讲解)

    下面小编就为大家带来一篇判断滚动条滑到底部触发事件的实例讲解。具有很好的参考价值。一起跟随小编过来看看吧,希望对大家有所帮助
    2017-11-11
  • IE6/7/8/9不支持exec的简写方式

    IE6/7/8/9不支持exec的简写方式

    Firefox/Safari/Chrome/Opera浏览器中使用exec方法时可以去掉“exec”用 “正则直接量+()” 方式使用
    2011-05-05
  • 微信小程序从注册账号到上架(图文详解)

    微信小程序从注册账号到上架(图文详解)

    这篇文章主要介绍了微信小程序从注册账号到上架详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 禁止你的左键复制实用技巧

    禁止你的左键复制实用技巧

    左键复制对于所有人来说有好有坏,例如原创内容就不想被别人复制,接下来介绍一种方法,有需要的朋友可以参考下
    2013-01-01
  • 微信小程序开发之获取用户手机号码(php接口解密)

    微信小程序开发之获取用户手机号码(php接口解密)

    这篇文章主要介绍了微信小程序开发之获取用户手机号码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • PHP捕捉异常中断的方法

    PHP捕捉异常中断的方法

    相信每位PHP程序员都知道,当PHP程序出现异常情况,如出现致命错误、超时或者不可知的逻辑错误导致程序中断,这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • 微信小程序中使用echarts的实现方法

    微信小程序中使用echarts的实现方法

    这篇文章主要介绍了微信小程序中使用echarts的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序路由跳转两种方式示例解析

    微信小程序路由跳转两种方式示例解析

    这篇文章主要为大家介绍了微信小程序路由跳转两种方式示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新。本文图文并茂给大家介绍了js中ajax知识,需要的朋友一起学习吧
    2016-11-11

最新评论