javascript - 我试图在选中父项时选中所有子项复选框。但这只能有效一次!当我下次尝试时， child 不会被检查吗？

Question

$(document).ready(function (e) {
    $('.links > input').change(function () {
        if ($(this).is(':checked')) {
            $(this).parent().children('.subLinks').children('.subLinkCheck').children().attr('checked', true);
        } else 
          $(this).parent().children('.subLinks').children('.subLinkCheck').children().attr('checked', false);;
    });
});

第一次运行良好。当我取消选中子复选框然后单击父复选框时，它会失败，

这是 HTML 内容

<ul id="mainLink">
    <li class="links">
        <input type="checkbox" />Interactive Community
        <ul class="subLinks">
            <li class="subLinkCheck">
                <input class="1" type="checkbox" />Usability Testing</li>
            <li class="subLinkCheck">
                <input type="checkbox" />HFI Certification</li>
        </ul>
    </li>
    <li class="links">
        <input type="checkbox" />Heuristic Evaluations
        <ul class="subLinks">
            <li class="subLinkCheck">
                <input type="checkbox" />Usability Testing</li>
            <li class="subLinkCheck">
                <input type="checkbox" />HFI Certification</li>
        </ul>
    </li>
</ul>

Answer 1

使用.prop()而不是 .attr()。

演示:http://jsfiddle.net/Jrrnj/