1. Introduction
In this short article, we are going to present how to check if a checkbox element is checked using jQuery.
2. Using input:checked
selector
We need to checked property of a checkbox DOM element using jQuery selector:
console.log('Orange is checked?', $('input[name="orange"]').is(":checked"));
console.log('Green is checked?', $('input[name="green"]').is(":checked"));
$('input').change((el) => {
console.log('Orange checked? ' + $('input[name="orange"]').is(":checked"));
console.log('Green checked? ' + $('input[name="green"]').is(":checked"));
});
label {
font-size: 24px;
}
<label>Orange <input type="checkbox" name="orange" value="Orange" checked/></label>
<br/>
<label>Green<input type="checkbox" name="green" value="Green" /></label>
3. Using Vanilla JS
The question was how to check the checkbox state using jQuery however, we can show you that in vanilla JavaScript we can do it also without unnecessary effort.
const orange = document.querySelector('input[name="orange"]');
const green = document.querySelector('input[name="green"]')
console.log('Orange is checked?', orange.checked);
console.log('Green is checked?', green.checked);
const onchange = (el) => {
console.log('Orange checked? ' + orange.checked);
console.log('Green checked? ' + green.checked);
};
orange.addEventListener('change', onchange);
green.addEventListener('change', onchange);
label {
font-size: 24px;
}
<label>Orange <input type="checkbox" name="orange" value="Orange" checked/></label>
<br/>
<label>Green<input type="checkbox" name="green" value="Green" /></label>
4. Conclusion
In this article, we presented how to check the input checkbox state using jQuery library. We used
is
function that checks if specified selector
:checked
is fulfilled.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}