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位于标题1的列表和标题2的列表中。

我想要完成一些事情。

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

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

任何帮助将不胜感激。我正在使用jQuery 1.9.1，但是如果你想用简单的方法做到这一点的JavaScript也很好（因为当你在Google Dev Tools中设置制动点以查看发生了什么时，它更容易理解）。

Answer 1

我已将 topList 类添加到外部UL和标头类到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);
});

复选框不确定状态逻辑

1 个答案: