jQuery 检查和取消选中复选框答案

【问题标题】：jQuery checking and unchecking checkboxesjQuery 检查和取消选中复选框
【发布时间】：2013-07-14 09:41:12
【问题描述】：

我必须选中和取消选中复选框。但是效果不好。

示例：当状态在第一次加载时处于活动状态：

取消选中复选框，使其处于非活动状态（工作正常）
再次检查以使其处于活动状态（不工作，保持未选中状态）

示例：当状态在第一次加载时处于非活动状态：

将复选框选中为活动状态（工作正常）
取消选中复选框，使其处于非活动状态（工作正常）
再次检查以使其处于活动状态（不工作，保持未选中状态）

这是我的示例代码：

var statusCheck = $('.status-box');

$.ajax({
    url: 'sample/url',
    type: 'POST',
    data: {
        user_id: ids,
        status: statusVal
    },
    success: function (response) {
        if (response == 'ok') {
            $.each(statusCheck, function () {
                var _this = $(this);

                if (_this.is(':checked')) {
                    _this.removeAttr('checked');
                } else {
                    _this.attr('checked', '');
                }
            });
        }
    }
});

【问题讨论】：

您在错误控制台中收到任何错误吗？尝试按 F12 以启动控制台
你试过.prop('checked',false/true)而不是_this.attr('checked', '');吗？
也检查这个相关的答案stackoverflow.com/questions/426258/…
@Amitd - 我有，但没有错误。实际上，它会将checked="checked" 放在HTML 元素上，但复选框仍然未选中。
@AntonBelev - 是的，但仍然无法正常工作。

标签： jquery jquery-attributes

【解决方案1】：

我在使用 JQuery 选中和取消选中复选框时遇到问题（奇怪的异常）。我使用的是.attr 和.removeAttr，当我将其更改为.prop('checked',false/true) 时，我解决了这个问题。

在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。 Reference:

请注意，您应该使用JQuery 1.6 +。

【讨论】：

我昨天试过这个 .prop() ，但它不起作用。但是我现在已经试过了，效果很好。也许它与我的代码有关.. 但现在它已解决.. 使用 .prop()，谢谢..

【解决方案2】：

var statusCheck = $('.status-box')

$.ajax({
        url     : 'sample/url',
        type    : 'POST',
        data    : { user_id: ids, status: statusVal },
        success : function( response ) {
            if( response == 'ok' ) {
                $.each(statusCheck, function(){
                    var _this    = $(this);

                    if( _this.is(':checked') ) {
                        _this.removeAttr('checked');
                    } else {
                        _this.attr('checked', 'checked');
                             // ...............^ here ^
                    }
                });
            }
        }
    });

试试这个：_this.attr('checked', 'checked');

还有来自这个Link 的.prop() 可能会变魔术；）

【讨论】：