基于JavaScript實現(xiàn)復選框的全選和取消全選

更新時間：2021年04月11日 15:10:48 作者：zuncle

這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)復選框的全選和取消全選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js復選框的全選和取消全選的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

測試代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{list-style: none;}
  </style>
</head>
<body>
  <div class="first">
    <ul class="frtInfo">
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpa"/>液體</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>純電池</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpe"/>危險品</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>配套電池</label>
      </li>
      <li class="same select">
        <label><input id="allChecked" class="allChk" type="button" name="sel" value="全選/取消" onclick="selectAllDels()"/></label>
      </li>
    </ul>
  </div>
  <script src="../js/jquery-1.11.3.js"></script>
  <script type="text/javascript">
    /*全選或取消全選*/
    function selectAllDels(){
      var allWp=document.getElementsByName("wp");
      var selOrUnsel=false;
      for(var i=0; i<allWp.length;i++){
        if(allWp[i].checked){
          selOrUnsel=true;
          break;
        }
      }
      if (selOrUnsel){
        allUnchk(allWp);
      }else{
        allchk(allWp);
      }
    }
    function allchk(allWp){
      for(var i=0; i<allWp.length;i++ ){
        allWp[i].checked=true;
      }
    }
    function allUnchk(allWp){
      for(var i=0; i<allWp.length;i++){
        allWp[i].checked=false;
      }
    }
  </script>
</body>
</html>

直接復制代碼可用。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
復選框

相關(guān)文章

JavaScript?canvas?實現(xiàn)用代碼畫畫
這篇文章主要為大家介紹了JavaScript?canvas?實現(xiàn)用代碼畫畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
javascript Array.remove() 數(shù)組刪除
下面的代碼主要是實現(xiàn)了，刪除數(shù)組中指定的值。
2009-08-08
JavaScript實現(xiàn)數(shù)組對象轉(zhuǎn)換為鍵值對的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對象的數(shù)組轉(zhuǎn)換為鍵值對形式的四種方法,并從實現(xiàn)方式的簡潔性、可讀性和性能角度進行了分析比較,感興趣的朋友可以參考下
2024-02-02
微信小程序官方動態(tài)自定義底部tabBar的例子
這篇文章主要介紹了微信小程序官方動態(tài)自定義底部tabBar的例子，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
JSON獲取屬性值方法代碼實例
這篇文章主要介紹了JSON獲取屬性值方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
修復ie8&chrome下window的resize事件多次執(zhí)行
window.onresize 事件專用事件綁定器 v0.1,用于解決 lte ie8 & chrome 及其他可能會出現(xiàn)的原生 window.resize 事件多次執(zhí)行的 BUG.
2011-10-10
js動態(tài)設置關(guān)鍵偵@keyframes的方法技巧
這篇文章主要給大家介紹了關(guān)于js動態(tài)設置關(guān)鍵偵@keyframes的方法技巧,@keyframes規(guī)則通過在動畫序列中定義關(guān)鍵幀(或waypoints)的樣式來控制CSS動畫序列中的中間步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
Javascript編程之繼承實例匯總
這篇文章主要介紹了Javascript編程之繼承實現(xiàn)方法,結(jié)合實例形式分析匯總了五種常見的繼承技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
JavaScript使用pop方法移除數(shù)組最后一個元素用法實例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個元素,實例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下
2015-04-04
D3.js實現(xiàn)散點圖和氣泡圖的方法詳解
這篇文章將會給大家介紹了另外兩種可視化圖表，利用D3.js實現(xiàn)散點圖和氣泡圖，文章通過多個方面介紹的非常詳細，下面來一起看看吧。
2016-09-09