jQuery - check if input checkbox is checked
In this article, we're going to have a look at how to check if the checkbox is checked with jQuery.
Quick solution:
xxxxxxxxxx// solution 1var checked = $('#my-checkbox').prop('checked');// solution 2var checked = $('#my-checkbox').is(':checked');// solution 3 - with Vanilla JSvar checkbox = document.getElementById('my-checkbox');var checked = checkbox.checked;
A more detailed description of solutions is placed below.
In this section prop method is used to get checked property value.
xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" /> Agreement </label> <script> $(document).ready(function() { var checkbox = $('#my-checkbox'); checkbox.click(function() { console.log(checkbox.prop('checked')); }); }); </script></body></html>In this section is method is used with :checked selector to check the current state of the checkbox.
xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" /> Agreement </label> <script> $(document).ready(function() { var checkbox = $('#my-checkbox'); checkbox.click(function() { console.log(checkbox.is(':checked')); }); }); </script></body></html>In this section checkbox element finding with a selector is described.
xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" /> Agreement </label> <script> $(document).ready(function() { $('#my-checkbox').click(function() { var checkbox = $('#my-checkbox:checked'); console.log(checkbox.length > 0); }); }); </script></body></html>xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" /> Agreement </label> <script> $(document).ready(function() { $('#my-checkbox').click(function() { var checkbox = $.find(':checked'); console.log(checkbox.length > 0); }); }); </script></body></html>In jQuery, each function called with handled event uses as context DOM element on that event occurs. It makes it a simple way possible to check the checkbox state with Vanilla JS. In the below example checked property is used to get the current state of the checkbox.
xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" /> Agreement </label> <script> $(document).ready(function() { $('#my-checkbox').click(function() { // this represents JavaScript DOM object // it can be used to check if checkbox is checked console.log(this.checked); }); }); </script></body></html>Note: this approach returns only
checkedattribute value - if state is changed by user interaction with UI it stays same - do not use it to check curent state (it is recomended to do not use it with onclick, onchange or oniput events too if developer does not now how it works).
A simple example of the problem is presented below.
xxxxxxxxxx<html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head><body> <label> <input id="my-checkbox" type="checkbox" checked="checked" /> Agreement </label> <script> $(document).ready(function() { var checkbox = $('#my-checkbox'); console.log(checkbox.attr('checked')); // attr and prop methods comparision console.log('----[ TEST ]----'); console.log(checkbox.prop('checked') + ' ' + checkbox.attr('checked')); checkbox.prop('checked', false); console.log(checkbox.prop('checked') + ' ' + checkbox.attr('checked')); console.log('----------------'); }); </script></body></html>