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);
    });
});

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

OH，我在肯尼亚内罗毕，可以解释早上的部分：）

Answer 1

使用prop而不是attr，因为bool建议使用prop，而attr为jQuery版本1.9 +

提供了不一致的行为

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

要看看attr和prop有什么不同，我做了一个演示

使用attr，只能工作一次！单击“检查”按钮，然后取消选中，现在就检查它将无效，Live Demo

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

使用道具，始终 Live Demo

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

属性和属性之间的区别非常重要   具体情况。在jQuery 1.6之前，有时会使用.attr（）方法   在检索某些属性时考虑了属性值，   这可能会导致行为不一致。从jQuery 1.6开始，.prop（）   方法提供了一种显式检索属性值的方法   .attr（）检索属性。

例如，selectedIndex，tagName，nodeName，nodeType，   应检索ownerDocument，defaultChecked和defaultSelected   并使用.prop（）方法设置。在jQuery 1.6之前，这些属性   可以使用.attr（）方法检索，但这不在.attr（）方法中   attr的范围。这些没有相应的属性，只是   属性，jQuery docs。

jquery：选择并取消选中所有复选框链接只能工作一次

1 个答案: