父/子复选框与标签

以下是一个包含父/子复选框和标签的代码示例的解决方法：

HTML代码：

<label for="parentCheckbox">
  <input type="checkbox" id="parentCheckbox"> 父复选框
</label>

<ul>
  <li>
    <label for="childCheckbox1">
      <input type="checkbox" id="childCheckbox1"> 子复选框1
    </label>
    <label for="childCheckbox2">
      <input type="checkbox" id="childCheckbox2"> 子复选框2
    </label>
  </li>
  <li>
    <label for="childCheckbox3">
      <input type="checkbox" id="childCheckbox3"> 子复选框3
    </label>
  </li>
</ul>

JavaScript代码：

// 获取父复选框和所有子复选框
const parentCheckbox = document.getElementById("parentCheckbox");
const childCheckboxes = document.querySelectorAll("input[type='checkbox']:not(#parentCheckbox)");

// 监听父复选框的变化
parentCheckbox.addEventListener("change", function() {
  // 根据父复选框的状态，设置所有子复选框的状态
  childCheckboxes.forEach(function(checkbox) {
    checkbox.checked = parentCheckbox.checked;
  });
});

// 监听子复选框的变化
childCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener("change", function() {
    // 检查所有子复选框的状态，如果有一个未选中，则取消选中父复选框
    if (!this.checked) {
      parentCheckbox.checked = false;
    }
  });
});

这个代码示例包含一个父复选框和多个子复选框，当父复选框被选中时，所有子复选框也会被选中。当子复选框中的任何一个被取消选中时，父复选框也会被取消选中。