基于JavaScript实现复选框的全选和取消全选

2019-11-19 17:39:40

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

直接复制代码可用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue-router跳转页面的方法

下一篇：jquery.cookie.js的介绍与使用方法