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 instead of attr。

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

Fiddle

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

在jquery attr的早期版本中，用于执行prop的工作，所以它以前用于工作

为什么我的嵌套复选框只能使用一次？

1 个答案: