jquery - JQuery - 复选框未检查（视觉上）

Question

我正在尝试动态更改checked值。但视觉上的复选框不断未被选中。虽然checked="checked"存在。

HTML：

<input type="checkbox" id="chk" /><br>
<button id="btn">Click me</button>

JS：

$("#btn").click(function(){
  var chk = $("#chk").attr("checked");
  $("#chk").attr("checked", !chk);
});

JSFiddle 上的链接：http: //jsfiddle.net/USHRw/4/ - 尝试多次单击该按钮。

如何解决这个问题。谢谢！

Answer 1

.prop()不使用.attr()。

$("#btn").click(function () {
    var chk = $("#chk").prop("checked");
    $("#chk").prop("checked", !chk);
    if (!chk === true) {
        $("#lbl").text("Checked");
    } else {
        $("#lbl").text("Unchecked");
    }
});

jsFiddle 示例

正如.attr()的文档所说：

要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。

Answer 2

使用prop()而不是attr()用于 jQuery 1.9 及更高版本，您的代码适用于 jQuery 1.8 .3在此处检查

使用prop()jQuery 1.9.1 的现场演示

$("#btn").click(function(){
    var chk = $("#chk").attr("checked");
    $("#chk").prop("checked", !chk);
});

Answer 3

我认为这将解决您的问题：

$("#button").click(function(){
  var checked = $("#chk").prop("checked");
  $("#chk").prop("checked", !checked);
    if (!checked === true) {
        //Checked Event Code
    } else {
        //Unchecked Event Code
    }
});