HTML 核取方塊全選／取消全選：JavaScript 寫法

<form id="contact-form">
  <fieldset class="check-group">
    <legend>想了解的服務（可複選）</legend>
    <label><input type="checkbox" class="check-all"> 全選</label>
    <label><input type="checkbox" name="service[]" value="web"> 網頁設計</label>
    <label><input type="checkbox" name="service[]" value="ads"> 關鍵字廣告</label>
    <label><input type="checkbox" name="service[]" value="video"> 形象影片</label>
    <label><input type="checkbox" name="service[]" value="care"> 網站管家年費</label>
    <label><input type="checkbox" name="service[]" value="shop" disabled> 購物網站（額滿）</label>
  </fieldset>
</form>

document.querySelectorAll('.check-group').forEach((group) => {
  const all = group.querySelector('.check-all');
  // 不包含「全選」自己，也跳過不能勾的選項
  const items = [...group.querySelectorAll('input[type="checkbox"]:not(.check-all):not(:disabled)')];

  // 按「全選」：其他選項全部跟著打勾或取消
  all.addEventListener('change', () => {
    items.forEach((box) => { box.checked = all.checked; });
  });

  // 個別勾選時，更新「全選」的狀態：全部勾了就打勾，勾了一部分就顯示半勾
  const update = () => {
    const count = items.filter((box) => box.checked).length;
    all.checked = count === items.length;
    all.indeterminate = count > 0 && count < items.length;
  };
  items.forEach((box) => box.addEventListener('change', update));
  update();
});

.check-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.check-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #1e8a8a;
}
/* 「全選」那一行加粗、下面畫一條線 */
.check-group label:has(.check-all) {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}