快捷導(dǎo)航

javascript中CheckBox全選終極方案

更新時(shí)間：2015年05月20日 11:14:28 投稿：hebedich

在javascript頁(yè)面中實(shí)現(xiàn)CheckBox或者Radio的選中狀態(tài)是一件很容易的事情，下面我們來(lái)給大家展示下在asp.net中使用javascript中CheckBox全選終極方案，有需要的小伙伴可以參考下。

在我們的程序開(kāi)發(fā)中經(jīng)常會(huì)要用到CheckBox的全選，通常情況下是在一些數(shù)據(jù)綁定控件中如Gridview等

下面以Repeater為例，在Repeater的header 和item中放入CheckBox控件。

<asp:Repeater ID="rptGroup" runat="server"> 
  <HeaderTemplate> 
    <table width="100%" cellspacing="1" >
      <tr> 
        <td width="3%" align="center" >
         <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
         onclick="checkAll  ('chkAll',this);" />             
        </td> 
      </tr> 
  </HeaderTemplate> 
  <ItemTemplate> 
    <tr> 
    <td align="center" >
     <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
     onclick="checkAll('chkAll',this);"/>
    </td> 
    </tr> 
  </ItemTemplate> 
  <FooterTemplate> 
    </table> 
  </FooterTemplate> 
 </asp:Repeater>

下面就是js腳本了

checkAll方法是實(shí)現(xiàn)CheckBox的全選和取消全選的。

function checkAll(chkAllID, thisObj) {
  var chkAll = document.getElementById(chkAllID);
  var chks = document.getElementsByTagName("input");
  var chkNo = 0;
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      //全選觸發(fā)事件  
      if (chkAll == thisObj) {
        chks[i].checked = thisObj.checked;
      }
      //非全選觸發(fā) 
      else {
        if (chks[i].checked && chks[i].id != chkAllID)
          selectNo++;
      }
      if (chks[i].id != chkAllID) {
        chkNo++;
      }
    }
  }
  if (chkAll != thisObj) {
    chkAll.checked = chkNo == selectNo;
  }
}

checkSelectNo 函數(shù)是用來(lái)獲取所有checkbox 選中的個(gè)數(shù) 這個(gè)在用來(lái)判斷是否有勾選時(shí)非常有用。

function checkSelectNo(chkAllID) {
  var chks = document.getElementsByTagName("input");
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      if (chks[i].id != chkAllID && chks[i].checked) {
        selectNo++;
      }
    }
  }
  return selectNo;
}

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
微信小程序中添加客服按鈕contact-button功能
這篇文章主要介紹了微信小程序中添加客服按鈕contact-button功能，小程序的客服系統(tǒng)，是微信做的非常成功的功能，開(kāi)發(fā)者很容易的實(shí)現(xiàn)客服功能
2018-04-04
Javascript 對(duì)象（object）合并操作實(shí)例分析
這篇文章主要介紹了Javascript 對(duì)象（object）合并操作,結(jié)合實(shí)例形式分析了javascript基于jQuery的extend方法、對(duì)象屬性、遍歷賦值等操作實(shí)現(xiàn)對(duì)象合并相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
2019-07-07
layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例
今天小編就為大家分享一篇layUI的驗(yàn)證碼功能及校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS支付頁(yè)面倒計(jì)時(shí)的實(shí)現(xiàn)示例
本文主要介紹了JS支付頁(yè)面倒計(jì)時(shí)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
js獲取html頁(yè)面節(jié)點(diǎn)方法(遞歸方式)
這篇文章主要介紹了js使用遞歸方式獲取html頁(yè)面節(jié)點(diǎn)的方法，大家可以參考使用吧
2013-12-12
深入理解redux之compose的具體應(yīng)用
這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
JS實(shí)現(xiàn)的自定義網(wǎng)頁(yè)拖動(dòng)類(lèi)
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義網(wǎng)頁(yè)拖動(dòng)類(lèi),涉及頁(yè)面元素響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-11-11
Vue+ElementUI實(shí)現(xiàn)文件照片音頻視頻預(yù)覽功能
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)微博批量取消關(guān)注功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02