How to Find checkbox is selected or not JQuery?

This tutorial explains about Jquery Checkbox selects or not with examples. One way is, Find the checkbox checked or not using the is() function. Second way, : checked attribute in jQuery, and in plain JavaScript.

This is a short tutorial on to check checkbox checked with different jQuery versions.

In HTML, the checkbox displays using the HTML input tag as follows

<div>
  Country
  <input
    type="checkbox"
    name="india"
    checked
    id="india"
    class="checkboxStyle"
  />
  India <input type="checkbox" name="usa" id="usa" class="checkboxStyle" /> USA
</div>

The HTML checkbox displays to select many values. Here, each checkbox assigns a different name, and selecting it always return a single element.

To find the check box selected or not , The checked attribute in the input HTML element tells that checkbox dies checked, which checked is equal to checked=true to the html input element.

checked=null/empty/false or checked attribute not found, des means checkbox is not checked.

Then, How do find out checkbox is checked or not using jquery?

#How do find checkbox is checked or not with Plain Javascript?

In JavaScript, Element select check using document methods. One method, the document.getElementById selector, is an id selector. Tlibraries are not required to import it. You can check other examples on different ways of reading input.

getElementById returns the checkbox element with id=provided value.

// this is for the checked box
document.getElementById("idcheckbox").checked returns true;

// not checked the box
document.getElementById("idcheckbox").checked returns false;

checked to attribute complete example:

var isIndiaChecked = document.getElementById("india").checked;
console.log(isIndiaChecked); //<input type="checkbox" name="india" checked id="india">
console.log(isIndiaChecked.checked); //true
if (isIndiaChecked) {
  console.log("checked");
} else {
  console.log("not checked");
}

The same can be achieved with the : is function with: checked pseudo-element. The second method, the is function in jquery checks the checked attribute contains Boolean value true/false

$("#india").is(":checked");

#Check if the Checkbox is checked or not with jquery

In Jquery, There are many ways we can find out checkbox selection

• is() function
• `:checked selector

In JQuery an element can be retrieved using id, class, name selectors

$('#india') - this is an id selector, selects checkbox with id=india $(‘.checkboxStyle’) - class selector, selects checkbox with class=“checkboxStyle” $(‘input[checkbox]’) - element selector, selects checkbox with input type=“checkbox”

#is function jquery

is the function return boolean=true, if the element is checked for a given id selector

console.log($("#india").is(":checked"));
console.log($("#usa").is(":checked"));

Above is an example to find the checkbox checked by the given id.

And also with the class selector, We can use .classname to select the HTML element in jquery.

As we have two checkbox elements with class="checkboxStyle", It returns the collection of the checkbox.

How do you find the checkbox checked for multiple checkboxes?

using each loop in jquery, this will have a callback function, that iterated with each checkbox iteration. this.checked to return the checked value for a current iterated checkbox..

The below example returns the checked elements as well as not checked values.

$(".checkboxStyle").each(function () {
  console.log(this.name + ":" + this.checked);
});

And output:

India:true
USA:false

#How to find checkbox is not checked?

you can use jquery not selector for the Checkbox not checked. combine : not selector with :checked returns all the checkboxes not checked

Syntax:

$(":not(selector)");

Example

console.log($("#india").is(":not(:checked)")); // returns false India checkbox is checked
console.log($("#usa").is(":not(:checked)")); // returns true USA checkbox is not checked

#conclusion

Checkbox and radio buttons provide: checked pseudo-elements which we can use many approaches with :is method and : checked to know checkbox is checked:not selectors combined with: checked used to know not checked checkbox.