jquery:选择和取消选择所有复选框链接只工作一次

Question

大家早上好一觉醒来，我发现了一个我没想到会发现的不同类型的问题。

所以我有一组复选框，可以通过两个专用链接全部选中或取消选中。这是 HTML

<fieldset>
    <legend>Reasons to be happy</legend>
    <a class="selectAll" href="#">Select All</a>
    <a class="deselectAll" href="#">Deselect All</a>
        <input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
    <label for="iwokeup">I woke up</label>
        <input name="reasons" id="health" type="checkbox" value="health" />
    <label for="health">My health</label>
        <input name="reasons" id="family" type="checkbox" value="family" />
    <label for="family">My family</label>
        <input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
    <label for="sunshine">The sun is shining</label>
</fieldset>

这是我的 jQuery 代码

$(document).ready(function()
{
    $('fieldset').on("click","a.selectAll",function(e)
    {
        e.preventDefault();
        $(this).nextAll('input[type="checkbox"]').attr('checked',true);

    });

    $('fieldset').on("click","a.deselectAll",function(e)
    {
        e.preventDefault();
        $(this).nextAll('input[type="checkbox"]').attr('checked',false);
    });
});

问题是它们都只工作一次。就像我第一次选择/取消选择它一样，然后它就不会了。可能是什么问题？

哦，我在肯尼亚内罗毕，这可以解释早上的部分:)

Answer 1

使用 prop 而不是 attr，因为 prop 被推荐用于 bool，而 attr 给出了 jQuery 1.9 版的不一致行为 +

$(this).nextAll('input[type="checkbox"]').prop('checked',false);

我做了一个demo，看看attr和prop有什么区别

使用 attr，只工作一次!单击“检查”按钮，然后单击“取消选中”，就这样了。“检查”不起作用，Live Demo

$('#btnChk').click(function(){
    $('#chk1').attr('checked', true);
});
$('#btnUnchk').click(function(){
    $('#chk1').attr('checked', false);
});

使用 prop，始终有效 Live Demo

$('#btnChk').click(function(){
    $('#chk1').prop('checked', true);
});
$('#btnUnchk').click(function(){
    $('#chk1').prop('checked', false);
});

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties, jQuery docs.