How to check a radio button with jQuery?

prop to the rescue for jQuery >= 1.6

Launch the jQuery knead-for-speed missile with .prop(), the preferred method for jQuery versions >= 1.6:

// .prop(), your Fast & Furious partner!
$('#radioId').prop('checked', true);


Old school: attr for jQuery < 1.6

A little rusty and with jQuery < 1.6? Fret not, .attr() has got your back:

// Go old school with .attr()
// Retro is always in, right?
$('#radioId').attr('checked', 'checked');


Aftermath: Triggering events

Post check-in, kick off the party with an event like click() or change():

// Here comes the change, sense it!
$('#radioId').prop('checked', true).change();


You've now RSVP'd to the event listeners!

Safety checks

• jQuery present, sir: Ensure jQuery library is boarding your project ship and syntax errors are not the uninvited pirates.

• Selectors at sight: Employ the appropriate selector based on the radio button's label or price tag (ID or value attribute). For a multi-worded affair:

  // Handling a word extravaganza.
  $('input[value="multi word"]').prop('checked', true);
  

• Browser compatibility: Run the code in as many web browsers as the genres in your Netflix list.

• Existence is not futile: Confirm the tangible presence of the radio button in your HTML.

Radio active or no?

Detect if a radio button is active:

// Checks radio life signs. Still there?
if ($('#radioId').is(':checked')) {
  // Checked, confirmed!
}


Handy for conditional statements, almost like checking your meal for a misplaced onion piece.

Cunning Alternatives

Struggling with an uncooperative check process? Try tricking it. Use a click simulation:

// Clicking ourselves lonely.
$('#radioId').each(function() {
  this.click(); // User action simulation, clever, right?
});


Error-handling or go home

Adapt a shield against potential script interruptions due to exceptions. Use try-catch blocks like a safety net:

// Wrapping the code in a safety bubble.
try {
  $('#radioId').prop('checked', true).change();
} catch (error) {
  // Oops, bubble burst! Handle the aftermath.
  console.error('Whoops, something went wrong: ', error);
}


Card up your sleeve: Dynamic selections

Form horror-struck with dynamic data? Check a radio button based on user input with a wildcard-like approach:

// The user's the boss now!
var userChoice = 'Some Value';
$(`input[name="groupName"][value="${userChoice}"]`).prop('checked', true);


This brings more adaptability to the code.

Chain me up!

Experience the power of jQuery by concatenating methods:

// Do two things at once because we like multi-tasking!
$('#radioId').prop('checked', true).hide();


This way, you are checking the button and then almost magically hiding it!