ADVERTISEMENT
ADVERTISEMENT

How do I check whether a checkbox is checked in jQuery?

Learn how do I check whether a checkbox is checked in jQuery?
Submitted by Pratishtha Saxena, on May 08, 2022

In jQuery, there are majorly two ways to determine whether the checkbox is checked or unchecked.

  1. prop() method
  2. is() method
  3. jQuery :checked Selector

Note: Always remember to apply the jQuery CDN link before writing the function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1) Using the jQuery prop () Method

This method is very simple and it tells us the current status of the checkbox.

Syntax:

$(selector).prop(parameter) 

Where, the parameter can be checked or unchecked depending upon how you want to know the current status of the checkbox.

Example 1:

jQuery:

<script>
    $(document).ready(function(){
        $('#myform').click(function(){
           var res = $('input[type="checkbox"]').prop(":checked");

           if(res){
                alert("CheckBox is Checked");
           }
           else{
                 alert("CheckBox is unchecked");
           }
        });
    });
</script>

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form id="myform">
        <input type="checkbox" name="country" value="India">India
        <br>

        <input type="checkbox" name="country" value="England">England
        <br>

        <input type="checkbox" name="country" value="USA">USA
        <br><br>

    </form>
</body>
</html>

Output:

Example 1: Checkbox is checked in jQuery

2) Using the jQuery is() Method

Like prop() method, is() method is also very simple to use and understand. It works in every case. It checks whether the checkbox is selected or not.

Syntax:

$(selector).is(parameter) 

Example 2:

jQuery:

<script>
    $(document).ready(function(){
        $('#myform').click(function(){
        
           if($("input[type=’checkbox’]").is(":checked")){
                alert("Check box is Checked");
           }
           else{
                 alert("Check box is unchecked");
           }
        });
    });
</script>

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form id="myform">
        <input type="checkbox" name="country" value="India">India
        <br>

        <input type="checkbox" name="country" value="England">England
        <br>

        <input type="checkbox" name="country" value="USA">USA
        <br><br>

    </form>
</body>
</html>

Output:

Example 2: Checkbox is checked in jQuery

3) Using the jQuery :checked Selector

Using this way also, you can check the status of the checkbox. This checks whether the checkbox is selected or not and gives true or false respectively. It can also be used for radio buttons.

Syntax:

$(selector):checked

Example 3:

jQuery:

<script>
$(document).ready(function() {
	$("#myform").click(function() {
	var res = $("input[type='checkbox']:checked");

		if (res) {
			alert("Check box is Checked");
		} else {
			alert("Check box is Unchecked");
		}
	});
});
</script>

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form id="myform">
        <input type="checkbox" name="country" value="India">India
        <br>

        <input type="checkbox" name="country" value="England">England
        <br>

        <input type="checkbox" name="country" value="USA">USA
        <br><br>

    </form>
</body>
</html>

Output:

Example 3: Checkbox is checked in jQuery


ADVERTISEMENT


ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.