复选框不确定状态逻辑

Question

我有嵌套的无序列表，列表项的标题看起来像这样。

<ul>
    <li><input type="checkbox" /> Header 1</li>
    <ul>
        <li><input type="checkbox" value="1" />Item 1</li>
    </ul>
    <li><input type="checkbox" /> Header 2</li>
    <ul>
        <li><input type="checkbox" value="1" />Item 1</li>
        <li><input type="checkbox" value="2" />Item 2</li>
        <li><input type="checkbox" value="3" />Item 3</li>
        <li><input type="checkbox" value="4" />Item 4</li>
    </ul>
    <li><input type="checkbox" /> Header 3</li>
    <ul>
        <li><input type="checkbox" value="5" />Item 5</li>
        <li><input type="checkbox" value="6" />Item 6</li>
        <li><input type="checkbox" value="7" />Item 7</li>
        <li><input type="checkbox" value="8" />Item 8</li>
        <li><input type="checkbox" value="9" />Item 9</li>
        <li><input type="checkbox" value="10" />Item 10</li>
        <li><input type="checkbox" value="11" />Item 11</li>
        <li><input type="checkbox" value="12" />Item 12</li>
        <li><input type="checkbox" value="13" />Item 13</li>
        <li><input type="checkbox" value="14" />Item 14</li>
        <li><input type="checkbox" value="15" />Item 15</li>
        <li><input type="checkbox" value="16" />Item 16</li>
    </ul>
</ul>

请注意，项目 1 位于 Header 1 的列表和 Header 2 的列表中。

我正在努力完成一些事情。

1. 当我单击一个标题项时，它会自动选择或取消选择紧随其后的ul 列表中的所有列表项li。
2. 当我单击嵌套ul 中的列表项li 时，我想检查其他项是否全部选中（在这种情况下，在标题列表项上放置复选标记）或未选中（在这种情况下，请删除标题列表项上的复选标记）如果它是选中和未选中的混合，则将标题列表项设置为不确定状态。
3. 当我检查一个列表项时，例如显示在标题 1 的列表和标题 2 的列表中的列表项 1，我希望它取消选中这两个项目，或者检查两个列表中的两个项目，并导致签入要求 2发生在受影响的名单上。

我很难做到这一点，因为我并不是很擅长 JavaScript，而且到目前为止我读过的所有代码都没有真正接近我的需要。

任何帮助将不胜感激。我使用的是 jQuery 1.9.1，但如果你想用最基本的 JavaScript 来做这件事，我也可以（因为当你在 Google 开发工具中设置一个刹车点以查看发生了什么时，它更容易遵循）。

Answer 1

我已将 topList 类添加到外部 UL 和 header 类添加到 LI 标头元素以简化选择器，因此您可能需要对其进行调整，但我认为这应该做你想做的事。 jsfiddle上的完整示例

//selects all items under a header. This might also select checkboxes from other headers if they share a value. Assumes, "this" points to the header LI
function selectAll() {
    var $this = $(this);
    var isChecked = $this.find(":checkbox").prop("checked");
    $this.find("+ul :checkbox").each(function() {
        selectCheckbox($(this), isChecked);
    });
    $(".header + ul").each(updateHeaderState);
}

//selects or deselects a checkbox. Also, selects other checkboxes if they share a value
function selectCheckbox($checkbox, isChecked) {
    var value = $checkbox.val();
    $checkbox.prop("checked", isChecked);
    $(".topList :checkbox[value="+value+"]").prop("checked", isChecked);
}

//updates the state of the header checkbox. Assumes "this" points to the UL element following a header
function updateHeaderState() {
    var $this = $(this);
    var someChecked = $this.find(":checkbox:checked").length > 0;
    var someUnchecked = $this.find(":checkbox:not(:checked)").length > 0;

    var $header = $this.prev().find(":checkbox");
    $header.prop("indeterminate", someChecked && someUnchecked);
    $header.prop("checked", someChecked || !someUnchecked);
}

$(".header").click(selectAll);
$(".header + ul li").click(function() {
    var $this = $(this);
    var isChecked = $this.find(":checkbox").prop("checked");
    selectCheckbox($this.find(":checkbox"), isChecked);    
    $(".header + ul").each(updateHeaderState);
});