I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.

For example, if the age checkbox is checked, then I need to show a textbox to enter age, else hide the textbox.

But the following code returns false by default:

if ($('#isAgeSelected').attr('checked')) {
  $("#txtAge").show();
} else {
  $("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
  Age is selected
</div>

How do I successfully query the checked property?

javascript jquery html checkbox 
4 Answers

This worked for me:

$get("isAgeSelected ").checked == true

Where isAgeSelected is the id of the control.

Also, @karim79's answer works fine. I am not sure what I missed at the time I tested it.

Note, this is answer uses Microsoft Ajax, not jQuery

answered Jan 02


One reliable way I use is:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

If you want to iterate over checked elements use the parent element

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

More info:

This works well because all checkboxes have a property checked which stores the actual state of the checkbox. If you wish you can inspect the page and try to check and uncheck a checkbox, and you will notice the attribute "checked" (if present) will remain the same. This attribute only represents the initial state of the checkbox and not the current state. The current state is stored in the property checked of the dom element for that checkbox.

answered Jan 02


This script is useful when you need users to be able to select only one checkbox on pages same as the radio button I mean if you have a group of checkboxes and you want to force users to select only one checkbox at a time then you can use this script.

I know in many cases radio buttons are "ideal" but in some cases, you will need this script to check only one checkbox from a group of checkboxes.

See the example below :

<html>
<head>
    <title>how to select only one checkbox at a time in jquery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
    <input value="1" name="product" class="product-list" type="checkbox">Product 1  
    <input value="2" name="product" class="product-list" type="checkbox">Product 2  
    <input value="3" name="product" class="product-list" type="checkbox">Product 3  
    <input value="4" name="product" class="product-list" type="checkbox">Product 4  
    <input value="5" name="product" class="product-list" type="checkbox">Product 5  
    <script type="text/javascript">
    $('.product-list').on('change', function() {
        $('.product-list').not(this).prop('checked', false);  
    });
  </script>
</body>
</html>

You can also go with the following script to force users to select only one checkbox at a time :

<script type="text/javascript">
    //Near checkboxes
    $('.product-list').click(function() {
        $(this).siblings('input:checkbox').prop('checked', false);
    });
</script>

answered Jan 02


Using is() of jQuery to Check If Checkbox is Checked on Button Click

The is() method is the most used method to check the status of the checkbox or any other condition of the HTML element. To find the checkbox is check, you need to pass the “:checked” as the argument of the is(). If you want to check the checkbox is unchecked, pass:not(:checked)” as an argument of the function.

<script>
$(document).ready(function(){
    $("#checkcheckboxisName").click(function(){
        if($(this).is(":checked")){
        	alert("The checkbox of name is checked");
        }else if($(this).is(":not(:checked)")){
        	alert("The checkbox of name is unchecked");
        }
    });
});
</script>
<form action="#" method="get">
  <input type="checkbox" name="Name" id="checkcheckboxisName" value="Name">Name
</form>
<p>Click the checkboxes to check the status.</p>

answered Jan 02


Login and Submit Your Answer
Browse other questions tagged  javascript  jquery  html  checkbox or ask your own question.