js修改checkbox全选按钮样式

<div id="checkboxContainer">
  <input type="checkbox" id="selectAll"> 全选
  <div class="checkboxGroup">
    <input type="checkbox" class="itemCheckbox"> 选项1
    <input type="checkbox" class="itemCheckbox"> 选项2
    <input type="checkbox" class="itemCheckbox"> 选项3
  </div>
</div>

#selectAll {
  /* 默认样式 */
}

#selectAll.checked {
  /* 全选时的样式 */
  background-color: green;
}

.itemCheckbox {
  /* 单个复选框的样式 */
}

document.addEventListener('DOMContentLoaded', function() {
  const selectAll = document.getElementById('selectAll');
  const itemCheckboxes = document.querySelectorAll('.itemCheckbox');

  // 监听全选按钮的变化
  selectAll.addEventListener('change', function() {
    itemCheckboxes.forEach(function(checkbox) {
      checkbox.checked = selectAll.checked;
    });
    updateSelectAllStyle();
  });

  // 监听每个子复选框的变化
  itemCheckboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      updateSelectAllStyle();
    });
  });

  // 更新全选按钮的样式
  function updateSelectAllStyle() {
    if (Array.from(itemCheckboxes).every(function(checkbox) { return checkbox.checked; })) {
      selectAll.classList.add('checked');
    } else {
      selectAll.classList.remove('checked');
    }
  }
});