Working with Radio Buttons in jQuery

Radio buttons are a common form element used to allow users to select one option from a group of options. When working with radio buttons in jQuery, it’s often necessary to determine which button is currently selected. In this tutorial, we’ll explore how to use jQuery to get the value of the selected radio button.

Selecting Radio Buttons

To start, you need to select the radio buttons on your page. You can do this using the input selector and specifying the type as radio. For example:

$("input[type='radio']")

This will select all radio buttons on the page.

Getting the Selected Radio Button

To get the selected radio button, you can use the :checked pseudo-class. This class is added to an element when it’s checked. You can combine this with the radio button selector like so:

$("input[type='radio']:checked")

This will select only the radio buttons that are currently checked.

Getting the Value of the Selected Radio Button

Once you have the selected radio button, you can get its value using the val() method:

$("input[type='radio']:checked").val()

This will return the value of the selected radio button.

Example Use Case

Here’s an example of how you might use this in a real-world scenario:

<form id="myForm">
  <fieldset>
    <legend>Choose an option</legend>
    <label><input type="radio" name="options" value="1" /> Option 1</label> <br />
    <label><input type="radio" name="options" value="2" /> Option 2</label> <br />
    <label><input type="radio" name="options" value="3" /> Option 3</label>
  </fieldset>
</form>

<script>
  $("#myForm input[type='radio']").on("change", function() {
    var selectedValue = $("input[name='options']:checked").val();
    console.log(selectedValue);
  });
</script>

In this example, we’re listening for the change event on the radio buttons and logging the value of the selected button to the console.

Tips and Variations

• You can also use the filter() method to get the checked radio button from a group of radio buttons:

var myRadio = $("input[name=myRadio]");
var checkedValue = myRadio.filter(":checked").val();

• If you have a reference to a container element, you can use the find() method to get the selected radio button:

var form = $("#mainForm");
var checkedValue = form.find("input[name=myRadio]:checked").val();

By following these examples and tips, you should be able to easily work with radio buttons in jQuery and determine which one is currently selected.