How to check whether a checkbox is checked using jQuery

January 06, 2020 No comments JavaScript jQuery Snippets Examples QA

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.
{{ message }}

{{ 'Comments are closed.' | trans }}