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() сказать:

Для того, чтобы получать и изменять свойства DOM, такие как проверено, выбран, или выключенное состояние элементов формы, используйте .prop().

Answer 2

Использование prop() вместо attr() для JQuery 1.9 и выше, ваш код работает на JQuery 1.8 +0,3 проверить его here

Live demo с помощью 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 
    } 
});