本文實例為大家分享了js復選框的全選和取消全選的具體代碼,供大家參考,具體內容如下
效果圖:

測試代碼如下:
<!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>直接復制代碼可用。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答