基于JavaScript实现复选框的全选和取消全选-js教程-PHP中文网

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

高洛峰

发布： 2017-02-11 15:45:48

原创

1321人浏览过

这篇文章主要为大家详细介绍了基于javascript实现复选框的全选和取消全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js复选框的全选和取消全选的具体代码，供大家参考，具体内容如下

效果图：

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

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{list-style: none;}
  </style>
</head>
<body>
  <p 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>
  </p>
  <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>

登录后复制

立即学习“Java免费学习笔记（深入）”；

直接复制代码可用。

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

更多基于JavaScript实现复选框的全选和取消全选相关文章请关注PHP中文网！