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 example

作为 .attr() 的文档说:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.