jquery check if checkbox is checked – Best 5 Examples

jquery check if checkbox is checked : prop() and is() method are the best 2 way Use the jQuery prop() method & :checked selector : Question – How to check a checkbox is checked or not using jQuery?

jquery if checkbox checked

$( "YOUR_SELECTOR" ).attr( "checked" )  // if present on the element => true, if not present => undefined 
$( "YOUR_SELECTOR" ).prop( "checked" ) // if checked => true,  if unchecked => false.
$( "YOUR_SELECTOR" ).is( ":checked" ) // if checked => true,  if unchecked => false.

jquery check if checkbox is checked

$('#Your_selectore').prop('checked'); // Boolean true

Using the jQuery prop() Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check If A Checkbox Is Checked With jQuery - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $("#display_output").html("Your Item is checked.");
            }
            else if($(this).prop("checked") == false){
                $("#display_output").html("Your Item is unchecked.");
            }
        });
    });
</script>
</head>
<body>
	<p><input type="checkbox"> check whether a checkbox is checked in jQuery Example.</p>
    <div id="display_output" style="background: green;"></div>
</body>
</html>

Using the jQuery :checked Selector

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check If A Checkbox Is Checked With jQuery - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).is(":checked")){
                $("#display_output").html("Your Item is checked.");
            }
            else if($(this).is(":not(:checked)")){
                $("#display_output").html("Your Item is unchecked.");
            }
        });
    });
</script>
</head>
<body>
    <p><input type="checkbox"> check whether a checkbox is checked in jQuery Example.</p>
    <div id="display_output" style="background: green;"></div>
</body>
</html>

uses the length() and size() methods:

$('#checkbox1:checked').length; // Integer >0
$('#checkbox1:checked').size(); // .size() can be used instead of .length

Example

<!DOCTYPE html>
<html>
  <head>
    <title>How to Test If a Checkbox is Checked with jQuery - www.pakainfo.com</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <div id="checkList">
      <input id="product1" type="checkbox" name="mobile" value="1" />
      <input id="product2" type="checkbox" name="laptop" value="2" />
      <input id="product3" type="checkbox" name="dvd" value="3" />
    </div>
    <input type="button" id="btnCheck" value="Check" />
    <script type="text/javascript">
      $(function() {
        $("#btnCheck").click(function() {
            let checked = $("#checkList input[type=checkbox]:checked")
              .length;
            if(checked > 0) {
              alert(checked + " Product(s) are checked.");
              return true;
            } else {
              alert("Please select Product(s).");
              return false;
            }
          });
      });
    </script>
  </body>
</html>

Free Live Chat for Any Issue

check if checkbox is checked jquery

using plane javascript

if(document.getElementById('checkListId').checked) {
    //Your Logic
} 

using jQuery

if($('#checkListId').is(':checked')){
    //Your Logic
}

jquery checkbox checked value

if ($('#check_id').is(":checked"))
{
  //Your Logic
}

jquery check if checkbox is not checked

if (!$("#checkboxID").is(":checked")) {
    // Your Logic
}

jquery checkbox checked

$("checkbox").is(":checked")

check if checkbox is checked jquery

var $boxes = $('input[name=checkboxname]:checked');

I hope you get an idea about jquery check if checkbox is checked.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.

Rate this post