是一种常见的前端开发需求,用于实现全选功能。当所有子复选框被选中时,父复选框也会被选中,反之亦然。
这个功能可以通过以下步骤来实现:
<input type="checkbox">
来创建复选框。<input type="checkbox" id="parentCheckbox">父复选框
<br>
<input type="checkbox" class="childCheckbox">子复选框1
<br>
<input type="checkbox" class="childCheckbox">子复选框2
<br>
<input type="checkbox" class="childCheckbox">子复选框3
// 获取父复选框和所有子复选框的引用
var parentCheckbox = document.getElementById("parentCheckbox");
var childCheckboxes = document.getElementsByClassName("childCheckbox");
// 给所有子复选框添加点击事件监听器
for (var i = 0; i < childCheckboxes.length; i++) {
childCheckboxes[i].addEventListener("click", function() {
// 检查是否所有子复选框都被选中
var allChecked = true;
for (var j = 0; j < childCheckboxes.length; j++) {
if (!childCheckboxes[j].checked) {
allChecked = false;
break;
}
}
// 更新父复选框的选中状态
parentCheckbox.checked = allChecked;
});
}
// 给父复选框添加点击事件监听器
parentCheckbox.addEventListener("click", function() {
// 设置所有子复选框的选中状态与父复选框一致
for (var i = 0; i < childCheckboxes.length; i++) {
childCheckboxes[i].checked = parentCheckbox.checked;
}
});
这样,当所有子复选框被选中时,父复选框会自动被选中;当有任意一个子复选框未被选中时,父复选框会自动取消选中。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云