CSS+列表實現(xiàn)全選

使用CSS，我們可以輕松地實現(xiàn)“全選”功能。以下是具體的實現(xiàn)方法：

HTML代碼:

<ul id="list">
<li><input type="checkbox" name="checkAll" id="checkAll" /> 全選</li>
<li><input type="checkbox" name="checkbox1" /> 選項1</li>
<li><input type="checkbox" name="checkbox2" /> 選項2</li>
<li><input type="checkbox" name="checkbox3" /> 選項3</li>
<li><input type="checkbox" name="checkbox4" /> 選項4</li>
</ul>

CSS代碼:

#list input[type="checkbox"] {
display: none;
}
#list li {
cursor: pointer;
}
#list li:nth-child(1) {
font-weight: bold;
}
#list li:nth-child(1) input[type="checkbox"]:checked ~ li input[type="checkbox"] {
display: none;
}
#list li:nth-child(1) input[type="checkbox"]:checked ~ li {
opacity: 0.5;
}
#list li input[type="checkbox"]:checked {
background-color: #A3D8F4;
}
#list li input[type="checkbox"]:not(:checked):hover {
background-color: #ECECEC;
}
#checkAll:checked ~ li input[type="checkbox"] {
background-color: #A3D8F4;
}
#checkAll:not(:checked) ~ li input[type="checkbox"]:not(:checked):hover {
background-color: #ECECEC;
}
#checkAll:checked ~ li input[type="checkbox"] {
display: none;
}
#checkAll:checked ~ li {
opacity: 0.5;
}

代碼說明:

1. 首先，我們給每個checkbox隱藏了；
2. 我們添加了一些樣式來使每個li項在鼠標懸停和選中時改變背景色；
3. 當全選checkbox被選中時，所有l(wèi)i項的checkbox將變成選中狀態(tài)并且顯示背景色；
4. 當全選checkbox未選中時，所有l(wèi)i項的checkbox將變成未選中狀態(tài)并且不顯示背景色。

這樣就實現(xiàn)了使用CSS和HTML實現(xiàn)全選的功能！