快捷導(dǎo)航

JS獲取checkbox的個數(shù)簡單實(shí)例

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

下面小編就為大家?guī)硪黄狫S獲取checkbox的個數(shù)簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

var checkbox = document.getElementsByName("likes[]"); 
//此處通過此種方式才能獲得多選框?yàn)閿?shù)組。
                                            
//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);

我做的是每點(diǎn)擊一下多選框就判斷當(dāng)前checked個數(shù)是否超過某個數(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的個數(shù)簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
checkbox

相關(guān)文章

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