inputtype=checkbox的詳解

inputtype=checkbox是HTML中常用的表單元素之一，它可以讓用戶從多個選項中選擇一個或多個進行提交。在本文中我們將從多個方面來詳解inputtype=checkbox。

一、基礎用法

inputtype=checkbox最基礎的用法是讓用戶從多個選項中選擇一個或多個進行提交。我們可以通過給每一個input元素設置不同的value來讓用戶選擇不同的選項，當用戶提交表單時，我們可以通過表單數據來獲取用戶的選擇結果。

<form action="submit.php">
  <input type="checkbox" name="option_1" value="1">Option 1<br>
  <input type="checkbox" name="option_2" value="2">Option 2<br>
  <input type="checkbox" name="option_3" value="3">Option 3<br>
  <input type="submit" value="Submit">
</form>

上面的代碼中，我們定義了三個input元素，每個元素的type均為checkbox，name分別為option_1、option_2、option_3，value分別為1、2、3。當用戶選擇其中的若干個選項，並提交表單時，表單數據將包含選中的選項的name和value信息，比如option_1=1&option_3=3表示用戶選擇了第一個和第三個選項。

二、多選框的樣式修改

默認情況下，inputtype=checkbox呈現出來是一個方框，用戶可以點擊選中或取消選中，但是這種樣式可能並不適合所有的場景。我們可以通過CSS來修改多選框的樣式。

首先我們可以使用偽元素:before和:after來模擬多選框的勾選狀態。

input[type=checkbox] {
  display: none;
}
input[type=checkbox]+label:before {
  content: "&";
  display: inline-block;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #999;
  width: 20px;
  height: 20px;
  text-align: center;
}
input[type=checkbox]:checked+label:before {
  content: "√";
  background-color: #00a651;
  color: #fff;
  border-color: #00a651;
}

上面的代碼中，我們將多選框設為display: none;，然後通過相鄰選擇器+（加號）將多選框和label關聯在一起，當選中多選框時，勾選狀態的:before元素將顯示，未選中時則隱藏。這樣就達到了修改多選框樣式的目的。

三、全選和反選功能

在某些場景下，我們需要給用戶提供全選和反選的功能，這時我們需要使用JavaScript來實現這兩個功能。

<form>
    <input type="checkbox" name="option_1" value="1" class="select-all">全選<br>
    <input type="checkbox" name="option_2" value="2">Option 2<br>
    <input type="checkbox" name="option_3" value="3">Option 3<br>
    <input type="submit" value="Submit">
</form>

<script>
document.querySelector('.select-all').addEventListener('click', function() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]:not(.select-all)');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
});

document.addEventListener('change', function(event) {
  if (!event.target.matches('.select-all')) {
    var checkboxes = document.querySelectorAll('input[type=checkbox]:not(.select-all)');
    var allChecked = true;
    for (var i = 0; i < checkboxes.length; i++) {
      if (!checkboxes[i].checked) {
        allChecked = false;
        break;
      }
    }
    document.querySelector('.select-all').checked = allChecked;
  }
});
</script>

上面的代碼中，我們在第一個多選框上添加了一個class=select-all，表示這是全選按鈕。然後我們監聽全選按鈕的click事件，在點擊時遍歷所有的多選框，並設置它們的checked屬性。當用戶勾選或取消勾選一個選項時，我們還要遍歷所有多選框，並判斷是否所有的多選框都被勾選，然後設置全選框的勾選狀態。

四、在表格中使用checkbox

在表格中使用inputtype=checkbox是很常見的場景，但是在表格中使用checkbox也有一些需要注意的地方。

首先，每個checkbox應該使用不同的name，並在後台處理時分別處理。其次，應該保證表格選中狀態的一致性，即全選狀態下，每一個checkbox都應該被勾選。

<table>
  <thead>
    <tr>
      <th><input type="checkbox" name="select-all" id="select-all"></th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="selected_item[]"></td>
      <td>Alice</td>
      <td>28</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="selected_item[]"></td>
      <td>Bob</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

<script>
document.querySelector('#select-all').addEventListener('change', function() {
  var checkboxes = document.querySelectorAll('input[name="selected_item[]"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
});
document.addEventListener('change', function(event) {
  if (event.target.matches('input[name="selected_item[]"]')) {
    var checkboxes = document.querySelectorAll('input[name="selected_item[]"]');
    var allChecked = true;
    for (var i = 0; i < checkboxes.length; i++) {
      if (!checkboxes[i].checked) {
        allChecked = false;
        break;
      }
    }
    document.querySelector('#select-all').checked = allChecked;
  }
});
</script>

上面的代碼中，我們將每個checkbox的name均設置為selected_item[]，注意後面的[]，這樣做可以讓瀏覽器將多個選中的值組成一個數組傳遞到後台。

同時，我們為全選框和每個checkbox通過不同的name來區分，具體來說，全選框使用name=select-all，而每個checkbox則使用name=selected_item[]。當用戶點擊全選框時，我們遍歷所有的選項並設置它們的checked屬性。當用戶選擇或取消每一項時，我們遍歷所有的選項並判斷是否所有的選項都被選擇，然後設置全選框的checked屬性。