How to Effectively Check Radio Buttons with jQuery?

Effective Techniques for Checking Radio Buttons with jQuery

In this tutorial, we tackle the challenge of checking radio buttons with jQuery. We explore multiple approaches and troubleshooting tips to ensure your code operates flawlessly.

Background

Given the following HTML markup:

<form>
    <div>

Untrustworthy Approaches

Attempts to check the radio button using the following methods failed:

1. attr('checked', true): While this approach works in some cases, it may not correctly update the radio button's state.
2. "input[value='1']".attr('checked', true): This method aims to select the radio button by its value but yields no results.
3. 'input:radio[name="type"]'.filter('[value="1"]').attr('checked', true): Despite being a more specific selector, it also fails to check the intended radio button.

Effective Solutions

Depending on the version of jQuery you're using, there are two viable solutions:

For jQuery versions >= 1.6:

$("#radio_1").prop("checked", true);

For jQuery versions < 1.6:

$("#radio_1").attr('checked', 'checked');

Note: Accepting User Input

After setting the radio button's checked state, it's recommended to call the click() or change() event on the button to trigger any necessary actions or validation.

The above is the detailed content of How to Effectively Check Radio Buttons with jQuery?. For more information, please follow other related articles on the PHP Chinese website!