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 an 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 single element in this example.

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

checked attribute in html enable checkbox to be checked, that 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 document.getElementById selector, This 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 return 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 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 :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 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 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 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 checkbox 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 provides :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.