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和样式修改进行处理。