JQuery: How to check if Checkbox is Checked or Unchecked [Validate checkbox]

/ / 2 Comments

jQuery check if checkbox is checked or unchecked: This article explains how to get the checkbox checked status, or validate whether the checkbox is checked or unchecked in jQuery. In other words, how to test the state of checkbox i.e. whether the checkbox is checked or unchecked in jQuery.  Here we use jquery .is() method and matched checked attribute.

Description: The method .is() Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

HTML:

Here we have a checkbox control and a button tag, so our HTML look like as shown below:

<input type='checkbox' id='chkFollow'>Follow Me

<button id="btnCheckStatus">Click me</button> 

jQuery:  Using .is(":checked")  method will return boolean value

So now below written jQuery code, will display checkbox status .i.e whether the checkbox is checked or unchecked on button click.
//*
var chkItem=$("#chkFollow");
$("#btnCheckStatus").on('click',function(){
    if($(chkItem).is(":checked"))
    {
        console.log("Yes you are following ");
    }
    else{console.log("No you are not following");}
});
//*
In above code 1st, we stored the checkbox control in a variable, which we use when button click function trigger, basically assigning variable to control (selector)is good practice for performance wise, i.e. caching the control.

 Next we use .is(":checked") this return Boolean value. As a result, we got to know our checkbox current status,  checked or unchecked.

View Demo

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

2 Comments

  1. Mehmet 12/09/2017 22:12:18
    Thanks for this sharing.
  2. Satinder singh 12/28/2017 17:14:42
    You welcome Mehmet