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

更新時間：2020年11月20日 15:07:04 作者：我是Dreamer啊

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

JS網(wǎng)頁–全選和取消全選，供大家參考，具體內(nèi)容如下

表格，初始狀態(tài)下復選框都是未選中狀態(tài)，選中表頭的復選框后，下面幾個復選框變?yōu)檫x中狀態(tài)，取消表頭復選框選中狀態(tài)后，下面幾個復選框選中狀態(tài)也隨之取消；下面的幾個復選框同時選中時，表頭的復選框也隨之選中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全選和取消全選</title>
  <style>
    table {
      width: 200px;
      border-collapse: collapse;
      margin: 100px auto;
    }
    table thead {
      font-size: 16px;

      background-color: skyblue;
    }
    table th {
      border: 1px solid black;
    }
    table td {
      border: 1px solid black;
      font-size: 14px;
      
    }

  </style>
</head>
<body>
  <table>
    <thead >
      <tr>
        <th><input type="checkbox" id="j_cbAll"></th>
        <th>手機品牌</th>
        <th>價格</th>
      </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機1</td>
        <td>5000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機2</td>
        <td>6000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機3</td>
        <td>7000</td>
      </tr>
    </tbody>
  </table>
  <script>
    //選擇全選 下面復選框設置為checked；
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
    j_cbAll.onclick = function(){
      console.log(this.checked);
      for (var i =0 ;i < j_tbs.length;i++){
        j_tbs[i].checked = this.checked; 
      }
    }
    //下面復選框均為checked 全選復選框為checked；
    for(var j = 0;j < j_tbs.length; j++){
      j_tbs[j].onclick = function(){
        var flag =true;
        for(var i=0;i<j_tbs.length;i++){
          if(!j_tbs[i].checked){
            flag=false;
            break;
          }
        }
        j_cbAll.checked = flag;
      }

    }
      
  </script>
</body>
</html>

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

您可能感興趣的文章: