jquery - 删除复选框的选择不起作用

Question

function removeSelection(button) {
    $('#a').bind('click', function() {
        if($(button).hasClass('checked')) { 
            alert("a");
            $(this).find('input:checkbox').attr('checked', 'false');
            $(button).removeClass("checked");
        }
        else {
            alert("b");
            $(this).find('input:checkbox').attr('checked', 'checked');
            $(button).addClass("checked");
        }
    }); 
}

行为：

first click - Alert('b')
second click  Alert('a') Alert('b')
third click   Alert('a') Alert('b') Alert('a')

应该是什么：

first click - Alert('b')
second click  Alert('a') 
third click   Alert('b') 

问题是什么？

Answer 1

如果您使用的是 jQuery 1.9 ，请使用prop()而不是attr() 。并使用 true 和 false 进行检查和取消检查。

function removeSelection(button) {
    $('#a').bind('click', function() {
        if($(button).hasClass('checked')) { 
            alert("a");
            $(this).find('input:checkbox').prop('checked', false);
            $(button).removeClass("checked");
        }
        else {
            alert("b");
            $(this).find('input:checkbox').prop('checked', true);
            $(button).addClass("checked");
        }
    }); 
}

尽管如此，关于checked 属性最重要的概念是它不对应于checked 属性。该属性实际上对应于 defaultChecked 属性，应该只用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性会。因此，确定是否选中复选框的跨浏览器兼容方法是使用属性Reference

Answer 2

您必须从标签中删除属性“checked”。这不是css的问题。

http://api.jquery.com/removeAttr/