快捷導(dǎo)航

JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月19日 09:59:38 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

JS獲取多選框checkbox被選中的個(gè)數(shù)。

var checkbox = document.getElementsByName("likes[]"); 
//此處通過(guò)此種方式才能獲得多選框?yàn)閿?shù)組。
                                            
//like為name = "like[]" , 獲得時(shí)必須加上[]
var checked_counts = 0;

for(var i=0;i<checkbox.length;i++){
if(checkbox[i].checked){     //被選中的checkbox
checked_counts++;
}
}

alert(checked_counts);

我做的是每點(diǎn)擊一下多選框就判斷當(dāng)前checked個(gè)數(shù)是否超過(guò)某個(gè)數(shù)值

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);
    }
}

要使函數(shù)checkdata()每次點(diǎn)擊都發(fā)揮作用，需要在checkbox框中添加onclick事件：

<input type="checkbox" name="tie_in[]" value="1" onClick="return checkData()" />

以上這篇JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
checkbox

相關(guān)文章

uniapp自定義網(wǎng)絡(luò)檢測(cè)組件項(xiàng)目實(shí)戰(zhàn)總結(jié)分析
這篇文章主要為大家介紹了uniapp自定義網(wǎng)絡(luò)檢測(cè)組件項(xiàng)目實(shí)戰(zhàn)總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
判斷滾動(dòng)條滑到底部觸發(fā)事件(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇判斷滾動(dòng)條滑到底部觸發(fā)事件的實(shí)例講解。具有很好的參考價(jià)值。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助
2017-11-11
IE6/7/8/9不支持exec的簡(jiǎn)寫(xiě)方式
Firefox/Safari/Chrome/Opera瀏覽器中使用exec方法時(shí)可以去掉“exec”用 “正則直接量+()” 方式使用
2011-05-05
微信小程序從注冊(cè)賬號(hào)到上架（圖文詳解）
這篇文章主要介紹了微信小程序從注冊(cè)賬號(hào)到上架詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
禁止你的左鍵復(fù)制實(shí)用技巧
左鍵復(fù)制對(duì)于所有人來(lái)說(shuō)有好有壞，例如原創(chuàng)內(nèi)容就不想被別人復(fù)制，接下來(lái)介紹一種方法，有需要的朋友可以參考下
2013-01-01
微信小程序開(kāi)發(fā)之獲取用戶(hù)手機(jī)號(hào)碼(php接口解密)
這篇文章主要介紹了微信小程序開(kāi)發(fā)之獲取用戶(hù)手機(jī)號(hào)碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
PHP捕捉異常中斷的方法
相信每位PHP程序員都知道，當(dāng)PHP程序出現(xiàn)異常情況，如出現(xiàn)致命錯(cuò)誤、超時(shí)或者不可知的邏輯錯(cuò)誤導(dǎo)致程序中斷，這個(gè)時(shí)候就可以用 register_shutdown_function進(jìn)行異常處理。下面本文給出了詳細(xì)的示例代碼，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
微信小程序中使用echarts的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序中使用echarts的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
微信小程序路由跳轉(zhuǎn)兩種方式示例解析
這篇文章主要為大家介紹了微信小程序路由跳轉(zhuǎn)兩種方式示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2022-04-04
JavaScript中淺講ajax圖文詳解
ajax對(duì)于各位來(lái)說(shuō)，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺(tái)頁(yè)面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時(shí)還可以實(shí)現(xiàn)頁(yè)面的局部刷新。本文圖文并茂給大家介紹了js中ajax知識(shí)，需要的朋友一起學(xué)習(xí)吧
2016-11-11