Question

我遇到了一些jQuery或HTML的问题。

我有一些复选框。我希望有一个“主要”复选框，以便在检查“主要”时检查该类别下的几个复选框。

嗯，没关系。我这样解决了：

    $('#extraPolish').change(function() {
    if ($("#extraPolish").is(':checked') == true) {
        $("#extraPolish_Inside").attr('checked', 'checked');
        $("#extraPolish_UnderFender").attr('checked', 'checked');
        $("#extraPolish_OverFender").attr('checked', 'checked');
        console.log('checkd');
    } else {
        $("#extraPolish_Inside").removeAttr('checked');
        $("#extraPolish_UnderFender").removeAttr('checked');
        $("#extraPolish_OverFender").removeAttr('checked');
    }
});

所以当你检查#extraPolish那里的那些被检查时，当你删除#extraPolish的检查时，那些将被取消选中。

问题是，当我尝试再次检查它时，它会显示在HTML代码中，但不会在我的Google Chrome上进行检查。

任何想法？

Answer 1

正如其他人所说的那样 - 使用jquery 1.9 prop()是你想要的功能.attr（）做了不同的事情，一开始就错过了......

这将是我的解决方案。

$(document).ready(function () {
    $('#extraPolish').change(function() {
        $("#extraPolish_Inside").prop('checked', this.checked);
        $("#extraPolish_UnderFender").prop('checked', this.checked);
        $("#extraPolish_OverFender").prop('checked', this.checked);
        return false;
    });
});

Answer 2

尝试使用$("#extraPolish_Inside').prop('checked', true);和$("#extraPolish_Inside').prop('checked', false);代替$("#extraPolish_Inside").attr('checked', 'checked');

编辑：jsfiddle示例 - http://jsfiddle.net/rvtvr/1

Answer 3

不要完全删除checked属性，请尝试将其设置为null。

$('#extraPolish_Inside').attr('checked',null);

Here is a simple demo

Answer 4

改为使用.prop('checked', false);和.prop('checked', true);。

$(document).ready(function () {
    $('#extraPolish').change(function() {
        if ($("#extraPolish").is(':checked') == true) {
            $("#extraPolish_Inside").prop('checked', true);
            $("#extraPolish_UnderFender").prop('checked', true);
            $("#extraPolish_OverFender").prop('checked', true);
            console.log('checkd');
        } else {
            $("#extraPolish_Inside").prop('checked', false);
            $("#extraPolish_UnderFender").prop('checked', false);
            $("#extraPolish_OverFender").prop('checked', false);
        }
        return false;
    });
});

<强> jsFiddle example

请参阅http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-以获取完整的解释以及jQuery 1.9及更早版本之间行为不同的原因。

jquery复选框html问题

4 个答案:

Here is a simple demo