10

我对我的 jQuery 有一个非常简单的要求：如果选中一个单选按钮，则选中一组框，如果选中另一个，则将它们全部清除。

jquery 工作，但它只工作一次 - 也就是说，如果我单击以检查它们（所有框都选中），然后单击以清除它们（所有框都清除），然后再次单击以检查它们 - 没有效果。同样，如果我手动取消选中某些框，然后单击以再次全选，则没有效果。

jQuery

$('#all').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').attr('checked', false);   
    } else {
        $('.country').attr('checked', true);
    }
});


$('#none').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').attr('checked', true);    
    } else {
        $('.country').attr('checked', false);
    }
});

HTML

 <div class="subselect">
    <input type="radio" class="TLO" name="radio1" id="all" />Check All
<br />
        <input type="radio" class="TLO" name="radio1" id="none" />Clear All
        <br />
    </div>

    <br />
    <br />
    <div class="cselect" id="countries">
        <input type="checkbox" class="country"  />1
        <br />
        <input type="checkbox" class="country"  />2
        <br />
        <input type="checkbox" class="country"  />3
    </div>

jsFiddle http://jsfiddle.net/vsGtF/1/

4

2 回答 2

34

将您的更改.attr()为.prop().

$('#all').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').prop('checked', false);   
    } else {
        $('.country').prop('checked', true);
    }
});    
$('#none').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').prop('checked', true);    
    } else {
        $('.country').prop('checked', false);
    }
});

jsFiddle 示例

您也可以将其简化为：

$('#all').on('change', function () {
    $('.country').prop('checked', $(this).is(':checked'));
});
$('#none').on('change', function () {
    $('.country').prop('checked', !$(this).is(':checked'));
});

jsFiddle 示例

作为.attr()状态的文档：

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。

于 2013-02-04T03:56:12.657 回答
4

我知道这在这里被骗了很多，但我确实错过了一些东西，我有：

id = $(this).attr('id');
if($('#checkbox_' + id).prop('checked')){
    $('#checkbox_' + id).attr('checked', false);
} else {
    $('#checkbox_' + id).attr('checked', true);
}

如上所述，所有attr 情况都需要交换 prop()

if($('#checkbox_' + id).prop('checked')){
    $('#checkbox_' + id).prop('checked', false);
} else {
    $('#checkbox_' + id).prop('checked', true);
}

希望对某人有所帮助...

于 2013-12-03T16:24:31.013 回答