JQuery - Checkbox not checking (visually)

Question

I'm trying to dynamically change the checked value. But visually checkbox constantly unchecked. Although the checked="checked" is present.

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);
});

Link on JSFiddle: http://jsfiddle.net/USHRw/4/ - try click on the button several times.

How to fix this. Thanks!

Answer 1

Use .prop() not .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

As the docs for .attr() say:

要检索和更改DOM属性(如表单元素的已检查,已选择或已禁用状态),请使用.prop()方法.