If you have never done it before when you need to react on a checkbox being checked on unchecked, you might try using the jQuery attr function e.g.:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('#mycheckbox').click(function () {
if ($(this).attr('checked')) {
$("#mydiv").html("checked");
}
else {
$("#mydiv").html("unchecked");
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="mycheckbox"/>
<div id="mydiv"></div>
</body>
Well, this will not work. The condition will always return false and you’ll never see that the checkbox is checked.
There are a few different ways to get this piece of information. Instead of “$(this).attr(‘checked’)”, you can use any of the following conditions.
First “checked” is not an attribute of our checkbox but a property. In some versions of jQuery, calling attr(‘checked’) will return true/false, in others it will return checked or not and in others it will return the checked attribute set when creating the checkbox. Here a table from the jQuery documentation:
$( elem ).attr( "checked" ) (1.6) |
"checked" (String) Initial state of the checkbox; does not change |
|---|---|
$( elem ).attr( "checked" ) (1.6.1+) |
"checked" (String) Will change with checkbox state |
$( elem ).attr( "checked" ) (pre-1.6) |
true (Boolean) Changed with checkbox state |
Now, in jQuery 1.10, it doesn’t seem to ever return anything else than undefined.
So since it’s not actually an attribute but a property, the obvious solution is to use the prop function:
if ($(this).prop('checked')) {...} else {...}
Since checked is a property, you can also get the first object returned by $(this) and evaluate the checked property:
if ($(this).get(0).checked) {...} else {...}
While at it, you can switch back to a pure JavaScript solution:
if (document.getElementById('mycheckbox').checked) {...} else {...}
Another option is to use the :checked selector:
if ($(this).is(':checked')) {...} else {...}
Or if it looks to simple and you like it more complex:
if ($('#mycheckbox:checked').val() !== undefined) {...} else {...}
Well, I guess I’ve shown you enough different ways to do this. You just have to choose which one you like best. My personal favourite is using the prop function. But I guess the more pure JavaScript, the faster but I doubt your users will ever notice the difference (except if they have to work with millions of checkbox but in this case I’d sue your UI designer).
I think attr will not work in recent jQuery versions, prop function will work instead.