How to check whether a checkbox is checked in jQuery?

To check if a checkbox is checked using jQuery, you can use the prop() method or the is() method. Here’s how:

1. Using prop()

The prop() method returns the current state of the checkbox (true if checked, false otherwise).

javascript

if ($('#checkboxId').prop('checked')) {
  // Checkbox is checked
  console.log("Checked!");
} else {
  // Checkbox is NOT checked
  console.log("Not checked.");
}

2. Using is(':checked')

The is() method checks if the element matches the selector :checked.

javascript

if ($('#checkboxId').is(':checked')) {
  // Checkbox is checked
} else {
  // Checkbox is NOT checked
}

Example with an Event Listener

Check the checkbox state when it’s clicked or when a button is pressed:

html

<input type="checkbox" id="myCheckbox"> Accept Terms
<button id="checkBtn">Check Status</button>

javascript

// Check when the checkbox is clicked
$('#myCheckbox').on('change', function() {
  if ($(this).prop('checked')) {
    alert("Checkbox checked!");
  }
});

// Check when a button is clicked
$('#checkBtn').on('click', function() {
  const isChecked = $('#myCheckbox').is(':checked');
  console.log("Checkbox status:", isChecked);
});

For Multiple Checkboxes

Check all checkboxes with a shared class (e.g., groupCheckbox):

html

<input type="checkbox" class="groupCheckbox"> Option 1
<input type="checkbox" class="groupCheckbox"> Option 2

javascript

$('.groupCheckbox').each(function() {
  if ($(this).prop('checked')) {
    console.log("Checked:", $(this).val());
  }
});

Key Notes

• prop() vs attr():
  • Use prop('checked') for the current state (boolean).
  • Avoid attr('checked'), which only checks the initial HTML attribute (not dynamic state).
• Vanilla JavaScript Alternative:javascriptCopyDownload// Pure JavaScript const isChecked = document.getElementById(‘checkboxId’).checked;
• Performance: Both prop() and is(':checked') work, but prop() is slightly faster.

When to Use?

• Use prop('checked') for simple boolean checks.
• Use is(':checked') for conditional checks in a chain of jQuery methods.