HTMLInputCheckbox的全面解說

一、HTMLInputCheckbox的概述

HTMLInputCheckbox是HTML中的一個元素，指代著一個複選框。用戶可以通過點擊選擇、取消選擇一個或多個複選框。HTMLInputCheckbox可以在form提交的時候將所選內容傳到伺服器。該元素可以通過多種方式進行定製化，包括設置默認選中和禁用狀態等。

二、HTMLInputCheckbox的屬性

1. checked屬性：控制一個checkbox的默認選中狀態。

  <input type="checkbox" name="exampleRadio" value="checked" checked/>

2. disabled屬性: 表示是否禁用這個checkbox元素。

  <input type="checkbox" name="exampleRadio" value="checked" disabled/>

3. value屬性： checkbox被選中時的值，可以用它來進行表單的提交。

  <input type="checkbox" name="exampleRadio" value="checked"/>

4. name屬性：指定該元素在表單中的名稱。

  <input type="checkbox" name="exampleRadio" value="checked"/>

三、HTMLInputCheckbox的用法

1、基本使用: 自定義屬性在value中體現。

  <form action="#" method="post">
    <label><input type="checkbox" name="exampleRadio" value="checked"/>請選擇</label>
    <label><input type="checkbox" name="exampleRadio" value="checked"/>請選擇</label>
  </form>

2、默認選中: 在checked屬性添加checked屬性。

  <form action="#" method="post">
    <label><input type="checkbox" name="exampleRadio" value="checked" checked/>請選擇</label>
    <label><input type="checkbox" name="exampleRadio" value="checked"/>請選擇</label>
  </form>

3、禁用狀態: 在disabled屬性添加disabled屬性。

  <form action="#" method="post">
    <label><input type="checkbox" name="exampleRadio" value="checked" disabled/>請選擇</label>
    <label><input type="checkbox" name="exampleRadio" value="checked"/>請選擇</label>
  </form>

四、HTMLInputCheckbox的定製化

1、選中狀態使用圖片替代系統默認的勾選，使用css顯示checked狀態。

  <style>
    input[type=checkbox] + label:before {
        content: "";  
        display: inline-block;  
        width: 14px;  
        height: 14px;  
        margin-right: 10px;  
        background-image: url('checkbox-unchecked.png');  
    }
    input[type=checkbox]:checked + label:before {
        content: "";  
        display: inline-block;  
        width: 14px;  
        height: 14px;  
        margin-right: 10px;  
        background-image: url('checkbox-checked.png');  
    }
  </style>
  <form action="#" method="post">
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox big-checkbox" name="exampleRadio" value="checked" checked />
    <label for="checkbox-1-1">選項1</label>
  </form>

2、通過JavaScript控制HTMLInputCheckbox的狀態。

  <form action="#" method="post">
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" name="exampleRadio" value="checked" />
    <label for="checkbox-2-1">選項2</label>
  </form>

  <script>
    let checkbox = document.getElementById('checkbox-2-1');
    checkbox.checked = true;
  </script>

五、HTMLInputCheckbox的兼容性

HTMLInputCheckbox在各種主流瀏覽器中都有著良好的兼容性，但是在IE6及以下的版本中不支持:checked 偽類，對其樣式的控制需要通過JavaScript和樣式修改進行處理。