javascript - 为什么我的嵌套复选框只能工作一次？

Question

我正在调整有嵌套复选框的现有页面，如下所示：

<ul>
    <li>
        <label><input type="checkbox" class="categorycheckbox">Group 1</label>
        <ul>
            <li>
                <label><input type="checkbox" class="productcheckbox">Item 1</label>
            </li>
            <li>
                <label><input type="checkbox" class="productcheckbox">Item 2</label>
            </li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox" class="categorycheckbox">Group 2</label>
        <ul>
            <li>
                <label><input type="checkbox" class="productcheckbox">Item 1</label>
            </li>
            <li>
                <label><input type="checkbox" class="productcheckbox">Item 2</label>
            </li>
        </ul>
    </li>
</ul>

等等。我正在使用 jQuery 让用户能够选择/取消选择所有子输入框，如下所示：

var updateCheckedState = function () {
    var list = $(this).closest("li").find("ul");
    $(".productcheckbox", list).attr("checked", this.checked);
};

$(".categorycheckbox").change(updateCheckedState);

这适用于为每个组检查一次和取消检查一次。然后它停止工作，我不明白为什么。我创建了一个小提琴：http: //jsfiddle.net/AQ76y/

Answer 1

使用prop 而不是 attr。

$(".productcheckbox", list).prop("checked", this.checked);

小提琴

因为有时更新属性不会更新元素属性，而是使用道具并更新属性，因此可以确保它可以跨浏览器工作。

在 jquery attr 的早期版本中，曾经做过 prop 的工作，所以它曾经工作过