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:
// solution 1
var checked = $('#my-checkbox').prop('checked');
// solution 2
var checked = $('#my-checkbox').is(':checked');
// solution 3 - with Vanilla JS
var checkbox = document.getElementById('my-checkbox');
var checked = checkbox.checked;
A more detailed description of solutions is placed below.
1. prop method example
In this section prop method is used to get checked property value.
// ONLINE-RUNNER:browser;
<!doctype html>
<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>
2. is method example
In this section is method is used with :checked selector to check the current state of the checkbox.
// ONLINE-RUNNER:browser;
<!doctype html>
<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>
3. Subquery example
In this section checkbox element finding with a selector is described.
3.1. Selector example
// ONLINE-RUNNER:browser;
<!doctype html>
<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>
3.2. find method example
// ONLINE-RUNNER:browser;
<!doctype html>
<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>
4. Vanilla JavaScript mixed example
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.
// ONLINE-RUNNER:browser;
<!doctype html>
<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>
5. attr method example
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.
// ONLINE-RUNNER:browser;
<!doctype html>
<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>