溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用原生JS編寫一個(gè)復(fù)選框功能

發(fā)布時(shí)間：2020-11-21 14:46:28 來源：億速云 閱讀：262 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了利用原生JS編寫一個(gè)復(fù)選框功能，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

<!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>手機(jī)品牌</th>
        <th>價(jià)格</th>
      </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)1</td>
        <td>5000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)2</td>
        <td>6000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)3</td>
        <td>7000</td>
      </tr>
    </tbody>
  </table>
  <script>
    //選擇全選 下面復(fù)選框設(shè)置為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; 
      }
    }
    //下面復(fù)選框均為checked 全選復(fù)選框?yàn)閏hecked；
    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)容就是利用原生JS編寫一個(gè)復(fù)選框功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手