[分享]css3多选框全选

CSS3多选框全选是一个非常常用的功能，特别是在涉及到批量操作时。下面介绍如何使用CSS3实现多选框全选功能。/ HTML代码 / 全选 1 2 3 4 以上是HTML代码，其中包含一个全选的多选框和...

CSS3多选框全选是一个非常常用的功能，特别是在涉及到批量操作时。下面介绍如何使用CSS3实现多选框全选功能。

/* HTML代码 */
<form>
  <label><input type="checkbox" class="check-all" />全选</label>
  <label><input type="checkbox" class="items" />1</label>
  <label><input type="checkbox" class="items" />2</label>
  <label><input type="checkbox" class="items" />3</label>
  <label><input type="checkbox" class="items" />4</label>
</form> 

以上是HTML代码，其中包含一个全选的多选框和一些普通的多选框，全选多选框的class为check-all，普通多选框的class为items。

/* CSS3代码 */
input[type="checkbox"].check-all:checked + label .items {
  /* 选中全选框后，所有items都被选中 */
  background-color: yellowgreen;
}

input[type="checkbox"].check-all:checked + label .check-all {
  /* 选中items后，全选框也被选中 */
  background-color: yellowgreen;
} 

以上是CSS3代码，使用了CSS3的可选元素+。当全选多选框选中时，将所有普通多选框都标记为选中状态；当普通多选框选中时，若所有普通多选框均选中时则标记全选多选框为选中状态。

通过以上方法，我们可以很方便地实现多选框全选的功能。