{

How to check checkbox is selected or not JQuery?


you can find checkbox checked or not using is() function or :checked attribute in jQuery, and also using checked property in plain JavaScript.

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

In HTML, checkbox is created using HTML input tag as follows Html checkbox is written to select multiple values, But in this example, each checkbox name is different, return always a single element.

  <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 checked attribute in HTML enables the checkbox to be checked, which means adding checked is equal to checked=true in HTML.

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

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

How to find checkbox is checked or not in plain javascript?

In JavaScript, Element can be selected using a document.getElementById selector.

It is an id selector in plain JavaScript, and libraries are not required to import.

You can check other examples on different ways reading input.

getElementByid returns the checkbox element with id=provided value.

You can use different ways in plain JavaScript with checked attribute and is function checked attribute returns the Boolean value true/false

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

// not checked 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.

Checkbox checked or not with jquery

In Jquery, There are multiple 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 selects checkbox with id=india $('.checkboxStyle') - this selects checkbox with class=“checkboxStyle” $(‘input[checkbox]') - this selects checkbox with input type=“checkbox”

is function

is function return boolean=rue if element is checked for a given id selector

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

Above is an example to find checkbox checked by 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 with each checkbox iteration. this.checked to return the checked value.

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 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 multiple approaches with :is method and :checked to know checkbox is checked :not selectors combined with:checked used to know not checked checkbox.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.