css全选按钮 |css获取元素的方法

首先，大家创建一个HTML表单，包括checkbox输入类型。这些输入是需要全选/取消全选功能的元素。大家给每个checkbox添加一个“check”类，以便稍后在CSS中使用：

<form id="myForm">
<input type="checkbox" name="option" value="option1" class="check">
<input type="checkbox" name="option" value="option2" class="check">
<input type="checkbox" name="option" value="option3" class="check">
<input type="checkbox" name="option" value="option4" class="check">
<input type="checkbox" name="option" value="option5" class="check">
</form>

接下来，大家将使用CSS为此表单中的checkbox元素创建全选按钮。大家可以使用伪类来定义全选按钮的外观。大家还可以使用class选择器来选择所有具有“check”类的checkbox：

<style>
/* 创建全选按钮样式 */
input[type="checkbox"][name="selectAll"]+label::before {
content: '\2714';
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #0074d9;
border-radius: 3px;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
margin-right: 5px;
}
/* 设置全选按钮的label样式 */
input[type="checkbox"][name="selectAll"]+label {
font-weight: bold;
font-size: 16px;
}
/* 创建所有'check'类的checkbox样式 */
.check {
margin-left: 30px;
}
</style>

如上所示，大家为所有具有“check”类的checkbox指定一个左边距，并为全选复选框的样式添加样式。大家还通过使用“+”运算符选择复选框的标签元素并为其添加样式。这样可以保证单击标签元素的文本也会选中该复选框。现在，大家需要创建所有复选框都可以被选中/取消选中的JavaScript函数。

<script>
/* 获取表单元素 */
const form = document.getElementById('myForm');
/* 获取复选框 */
const checkAll = form.querySelector('[name="selectAll"]');
const checks = form.querySelectorAll('.check');
checks.forEach(check =>check.addEventListener('click', function() {
/* 检查所有复选框是否都被选中 */
const allChecked = Array.from(checks).every(check =>check.checked);
/* 更新全选复选框的状态 */
checkAll.checked = allChecked;
}));
/* 监听全选复选框的点击事件 */
checkAll.addEventListener('click', function() {
checks.forEach(check =>check.checked = checkAll.checked);
});
</script>

以上代码将为所有复选框添加单击事件，每次用户单击时将检查所有复选框是否都被选中。如果都选中，则将选择所有单选按钮；否则，将取消选择它们。同时，大家为全选复选框添加了一个单击事件，该事件将更新所有复选框的状态。

最后，大家的表单现在已具有全选/取消全选功能！使用CSS和JavaScript，大家可以轻松创建交互性强的表单操作。这在设计更好的用户体验方面非常有用。