Checkbox tick not showing

Question

I have a checkbox that I am checking and unchecking using jQuery, however I have come across a bug most major browsers:

if I change the checkbox to be checked, then unchecked and then checked again through using jquery, the little cross no longer shows even though if you inspect the element the checked attribute has been added correctly.

I have used the following code to change the checked attribute:

$('.checkbox').attr('checked', true);

substituting in false for unchecking the box.

Has anyone come across this problem before or know how to get around it?

Here is a fiddle that replicates the problem - click on the check, then uncheck and then check again, you will see the tick no longer appears

score 5 · Accepted Answer · edited May 23 '17 at 12:03

5

DEMO

use .prop() instead of .attr()

$("#check").click(function (e) {
    e.preventDefault();
    $("#chk").prop("checked", true);
});

$("#uncheck").click(function (e) {
    e.preventDefault();
    $("#chk").prop("checked", false);
});

Read .prop() vs .attr()

edited May 23 '17 at 12:03

Community

1
1

answered Sep 30 '13 at 14:38

Tushar Gupta - curioustushar

58,085
24
103
107

1

ah, how come prop works but attr doesn't? – Pete Sep 30 '13 at 14:39
3

@Pete read http://stackoverflow.com/questions/5874652/prop-vs-attr and http://api.jquery.com/prop/#prop-propertyName – Tushar Gupta - curioustushar Sep 30 '13 at 14:43
Nice thanks, will accept when it lets me – Pete Sep 30 '13 at 14:46

score 0 · Answer 2 · answered Sep 30 '13 at 14:39

You have to use prop for that : $("#chk").prop("checked", true);

http://jsfiddle.net/daL3R/2/

$("#check").click(function(e) {
    e.preventDefault();
    //$("#chk").attr("checked", true);
    $("#chk").prop("checked", true);
});

$("#uncheck").click(function(e) {
    e.preventDefault();
    //$("#chk").attr("checked", false);
    $("#chk").prop("checked", false);
});

score 0 · Answer 3 · answered Sep 30 '13 at 14:39

0

$("#chk").prop("checked", false);
$("#chk").prop("checked", true);

answered Sep 30 '13 at 14:39

carter

5,074
4
31
40

score 0 · Answer 4 · answered Sep 30 '13 at 14:42

0

use this:

$("#check").click(function() {
   // e.preventDefault();
    $("#chk").prop("checked", true);
});

$("#uncheck").click(function() {
    //e.preventDefault();
    $("#chk").prop("checked", false);
});

answered Sep 30 '13 at 14:42

Vijay Verma

3,660
2
19
27

Checkbox tick not showing

4 Answers4