jQuery 選單結構變更導致失效？依據 DOM 重寫選取器修復勾選聯動

核心原則：選取器必須隨 DOM 結構同步更新

• 原：var children = $(this).next(); → 現在 <input> 的下一個同層元素是 <ul> 的父層 <h1>，故需改為 $(this).parent().next()。
• 頂層勾選框不應觸發「子項全選邏輯」，需加 return 中斷。
• 父層勾選狀態判斷的選取器需從 >input 改為 >h1 input。

修復後完整代碼

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<ul class="categories">
  <li>
    <h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">數碼電子</a></h1>
    <ul>
      <li><input type="checkbox" />手機</li>
      <li><input type="checkbox" />電腦</li>
      <li><input type="checkbox" />U盤</li>
      <li><input type="checkbox" />相機</li>
    </ul>
  </li>
  <li>
    <h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">服裝</a></h1>
    <ul>
      <li><input type="checkbox" />毛衣</li>
      <li><input type="checkbox" />T恤</li>
      <li><input type="checkbox" />羽絨服</li>
      <li><input type="checkbox" />秋褲</li>
    </ul>
  </li>
</ul>

<script>
$(function () {
    $("ul.categories input").click(function () {
        var $this = $(this);
        var children = $this.parent().next();           // 關鍵修正：找 h1 的下一個同層 ul
        var isChecked = $this.prop("checked");
        var isParent = false;

        if (children.is('ul')) {                        // 是頂層分類
            if (isChecked) {
                children.find("input").prop("checked", true);
            } else {
                children.find("input").prop("checked", false);
            }
            return;                                     // 頂層不執行向上冒泡邏輯
        }

        // 子項被點擊時，更新父層勾選狀態
        var $parentUl = $this.parent().parent();        // 所屬的子 ul
        var checkedCount = $parentUl.find(">li >input:checked").length;
        var totalCount = $parentUl.find(">li >input").length;
        var $topCheckbox = $parentUl.parent().find(">h1 input"); // 對應的頂層 checkbox

        if (checkedCount === totalCount) {
            $topCheckbox.prop("checked", true);
        } else {
            $topCheckbox.prop("checked", false);
        }
    });
});
</script>

除錯技巧

1. 在 Console 執行 $("ul.categories input") 確認選取到的元素數量與層級。
2. 點擊事件中 console.log(this, $(this).parent().next()[0]) 觀察實際 DOM 關係。
3. 善用 Elements 面板「Break on subtree modifications」追蹤動態結構變化。

總結

HTML 結構一旦調整，jQuery 選取器必須同步維護。採用「語意化類別名 + 相對關係選取」比「絕對路徑選取」更具彈性，減少重構時的維護成本。