Why is jQuery is not checking/unchecking checkbox

Question

When I run the following self-contained code, the checkbox gets checked and unchecked once but thereafter it doesn't even though the messages seem to imply the toggling.

<html>  
<head>
<title>dummy</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="fc" type="checkbox" />
<script>
function f () {
  if (typeof $("#fc").attr("checked") !== 'undefined') {
    alert("checked, unchecking");
    $("#fc").removeAttr("checked");
  } else {
    alert("unchecked, checking");
    $("#fc").attr("checked", "checked");
  }
  setTimeout(f, 1000);
}
setTimeout(f, 1000);
</script>
</body>
</html>

Tested in Firefox and it seems to work the first time, but then it's just rendered as unchecked. — Felix Kling
– Felix Kling, Commented Aug 26, 2013 at 8:11

Arun P Johny · Accepted Answer · 2013-08-26 08:13:07Z

20

need to use .prop() instead of .attr() to check and uncheck checkboxes

$("#fc").prop("checked", true);// true to check false to uncheck

Also use :checked filter to check whether a checkbox is checked

function f () {
    if ($("#fc").is(":checked")) {
        alert("checked, unchecking");
        $("#fc").prop("checked", false);
    } else {
        alert("unchecked, checking");
        $("#fc").prop("checked", true);
    }
    setTimeout(f, 1000);
}
setTimeout(f, 1000);

The above given sample can be simplified as

function f () {
    $("#fc").prop("checked", !$("#fc").is(":checked"));
}
setInterval(f, 1000);

Demo: Fiddle

edited Aug 26, 2013 at 8:13

answered Aug 26, 2013 at 8:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cHao Over a year ago

@Vandesh: There's plenty wrong with it. See, one big difference between the checked attribute and the checked property, is that the property gets/sets the current value, and the attribute gets/sets the initial value (and won't affect the state of the box afterward).

Felix Kling Over a year ago

Or $("#fc").prop("checked", function(i, v) { return !v; });

Felix Kling Over a year ago

@cHao: Then why does adding and removing the attribute check and uncheck the box the first time?

cHao Over a year ago

@FelixKling: Not sure. It's rather broken that only the first iteration works, IMO. It should either work every time or not work at all. Its only working once makes finding issues like this more difficult.

cHao Over a year ago

@Vandesh: Did you happen to try doing it in an interval? It checks the box once, unchecks it once, then nothing. See jsfiddle.net/arunpjohny/fDZXR/1

Collectives™ on Stack Overflow

Why is jQuery is not checking/unchecking checkbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related