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

Platform dive: Riding with .prop()

In need of a smooth ride across all jQuery versions? Use .prop('checked'):

$('#checkboxId').prop('checked') ? console.log("High five!") : console.log("Oopsie daisy!");


The .prop() magic draws out property values like a star from the night sky, perfect for nailing down the checkbox's current state.

Eventful voyages: Checkbox click handlers

Now let's up our game and bind checkbox states to some nifty actions:

$('#checkboxId').click(function() {
  $(this).prop('checked') ? $('#txtAge').show() : $('#txtAge').hide(); //Parenthood depends on your checkbox status now!
});


With this in your arsenal, the #txtAge element dances to the tunes of the checkbox's state when clicked.

Quick toggle: Swapping element visibility

Want to switch element visibility based on the checkbox state? Say no more:

$('#txtAge').toggle($('#checkboxId').prop('checked')); //It's a game of now you see me, now you don't!


This slice of jQuery goodness cyclically alters element visibility synced to our dear checkbox's state.

Strolling along jQuery versions

Knowing jQuery versions is like knowing your friends' birthdays. Prior to 1.6, you can get by with .attr('checked'), but it's not a promise;

Post 1.6, .prop('checked') became the prom king. So, match your jQuery versions with the corresponding method for a happy dev life!

Vanilla shake: Pure JavaScript

More into plain vanilla JavaScript? No worries, here's your route:

document.getElementById('isAgeSelected').checked; //Because who needs jQuery when JavaScript can do the trick!


Like the straight-A student, this one contacts the DOM directly, keeping it clean and simple!

Visualization

Think of checking a checkbox in jQuery like a door:

/* jQuery */
$('#checkboxId').is(':checked');

Door: [Closed] vs [Open]

In checkbox parlance:

If Closed ([  ]): 🚪➡️🔒 - The checkbox is **unchecked**
If Open ([x]): 🚪➡️✅ - The checkbox is **checked**

So it's just like peeking at a door to see whether it's open or shut! 🚪👀

Checkbox interplay: More than just 'checked' or 'unchecked'

Beyond isolated states, checkboxes have a fascinating potential of interactive roles within a document.

Master-slave dynamic: Checkbox controlling others

A single checkbox could be the decider for a slew of form event controls:

$('#masterCheckbox').on('change', function() {
  $('.slave-input').prop('disabled', !this.checked); //Who said checkboxes can't be little despots?
});


Not just state checks, checkboxes can direct actions on other form elements.

Look fades, but style remains: CSS styling based on checkbox state

CSS lets you doll up elements when the bound checkbox is checked:

input[type="checkbox"]:checked + label {
  font-weight: bold; //Checked checkboxes have bold companions!
}


It accentuates user experience through snappy visual feedback - no JS needed!

Accessibility: Towards universal user experience

While you charm users with slick behaviors, don't leave out users with screen readers. Use aria-checked for the checkbox states, and ensure properly associated labels to levitate your UX game!