Testing if certain checkbox is checked using jQuery is pretty simple task. But I, just like many other developers, keep forgetting the exact syntax. So I decided to carry on a little research on the subject and gather all related information including small caveats and write this article for the future reference.
This post covers 4 methods to check if checkbox is checked. All methods especially do the same thing: test if checkbox has checked property set. But depending on the version of jQuery you are using, the methods may vary. Lets consider we have the document setup below and see how to test checkbox checked using different versions of jQuery.
<input id="checkbox" type="checkbox" name="one" value="1" checked="checked"> <input id="checkbox2" type="checkbox" name="two" value="2"> <input id="checkbox3" type="checkbox" name="thr" value="3">
Using jQuery version 1.6 or newer
As I mentioned above, we need to check the checked property of an element and correct way of doing it is to use .prop() method. So if other methods do not add any value to your code’s readability, please use the first method below.
// First method - Recommended
$('#checkbox').prop('checked') // Boolean true
// Second method - Makes code more readable (e.g. in if statements)
$('#checkbox').is(':checked') // Boolean true
// Third method - Selecting the checkbox & filtering by :checked selector
$('#checkbox:checked').length // Integer >0
$('#checkbox:checked').size() // .size() can be used instead of .length
// Fourth method - Getting DOM object reference
$('#checkbox').get(0).checked // Boolean true
$('#checkbox')[0].checked // Boolean true (same as above)
Earlier version of jQuery (up to v1.5)
jQuery version 1.6 introduced .prop() method to get HTML/DOM element’s property instead of an attribute. Prior to version 1.6 we had to use .attr() method instead. Read more about the difference between .prop() and .attr().
// First method - Recommended
$('#checkbox').attr('checked') // Boolean true
// Second, Third & Fourth methods – The same as for version 1.6. See above.
Caveats & problems
What if your jQuery selector has a set of more than one checkbox? This is how the methods above will behave?
Case 1: <input class="check" type="checkbox" name="one" checked="checked"> <input class="check" type="checkbox" name="two"> Case 2: <input class="check" type="checkbox" name="two"> <input class="check" type="checkbox" name="one" checked="checked">
// Case 1:
$('#checkbox').prop('checked') // true
$('#checkbox').is(':checked') // true
$('#checkbox:checked').length // 1
$('#checkbox')[0].checked // true
// Case 2:
$('#checkbox').prop('checked') // false
$('#checkbox').is(':checked') // true
$('#checkbox:checked').length // 1
$('#checkbox')[0].checked // false
jQuery attribute selector $('elem[name]') does not return updated property value. So use other methods instead.
$('#checkbox[checked]').length; // Integer 1
$('#checkbox').prop('checked', false); // Uncheck the checkbox
$('#checkbox[checked]').length; // Still returns 1, not 0
Select all checked checkboxes on the page or within a container.
$("input[type=checkbox][checked]"); // All checkboxes in the document that are checked
This is all I could find on the subject. Please bookmark or share the article so that it is easier to find it later.