如果选中所有子复选框，则选中父复选框

是一种常见的前端开发需求，用于实现全选功能。当所有子复选框被选中时，父复选框也会被选中，反之亦然。

这个功能可以通过以下步骤来实现：

HTML结构：在HTML中，需要使用父复选框和子复选框的标签元素，例如使用<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

JavaScript代码：使用JavaScript来实现选中所有子复选框时选中父复选框的逻辑。

// 获取父复选框和所有子复选框的引用
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;
  }
});

这样，当所有子复选框被选中时，父复选框会自动被选中；当有任意一个子复选框未被选中时，父复选框会自动取消选中。

腾讯云相关产品和产品介绍链接地址：