Question

How to Get Radio Button Value in jQuery ?

Radio buttons are an input element that allows users to select only one item from a list. When working with forms and user interactions, retrieving the selected value of a radio button is a regular operation. This article will show you how to use jQuery to get the value of a radio button.

Table of Contents: 

1. What does it mean by Retrieving Radio Buttons Value in jQuery?
2. Getting the Values of Radio Buttons
   1. Getting Radio Selected Value Using Class
   2. Getting Radio Selected Value Using Attribute Name with Value
   3. Getting Radio Selected Value Using Attribute Type and Value
3. Some Alternative Approaches
   1. Using the .change() Event
   2. Using the .click() Event
4. References

What does it mean by Retrieving Radio Buttons Value in jQuery?

Retrieving radio button values with jQuery refers to the process of finding out and gathering an option of choice from a group of radio buttons in a web form using the jQuery library, a useful tool for simplifying JavaScript code. Radio buttons are typically used when users must choose a single option from a list of options.
Developers may use jQuery to write code that monitors for user input with these radio buttons. When a user clicks a radio button to make a selection, jQuery assists in determining which button was pressed and retrieving the value associated with it. This value can be used to process form submissions, update web content, or trigger particular actions based on the user's selection.

Syntax:

Syntax for jQuery code

$(selector).action();</span></span></span></code></pre>
<p><strong>$: Represents the jQuery library symbol, providing access to its functions.
selector: Identifies the HTML element(s) to be targeted, similar to how CSS selectors work.
action(): Denotes the specific jQuery action to be performed on the selected element(s), such as modifying content, applying styles, or handling events.

Getting the Values of Radio Buttons:

To get the value of a radio button using jQuery, you can use the following methods:

1. Getting Radio Selected Value Using Class

In this method, you'll give the radio buttons a class and then use that class to target the selected radio button.

1. HTML:
   Add the class="fruit-radio" attribute to each radio button.

    Apple
   
    Banana
   
    Orange
   

2. jQuery:
   Then use the class selector .fruit-radio in the script.
   

   $(document).ready(function() {
   
       $(".fruit-radio").on("click", function() {
   
           var selectedFruit = $(".fruit-radio:checked").val();<br>
           console.log("Selected fruit using class: " + selectedFruit);<br>
       });<br>
   });</span></span></span></code></pre>
   <ul>
   <li>Each radio button in the group has the class "fruit-radio" applied to it.</li>
   <li>The<strong>.fruit-radio:checked selector</strong> is used to target the radio button with the class "fruit-radio" that is presently checked.</li>
   <li>The <strong>.val() method</strong> retrieves the value of the selected radio button.<br><br></li>
   </ul>
   This is how the output is shown on the webpage:       
   <p><a title=""><img src="https://logiclair.org/?qa=blob&qa_blobid=10257173123996631164" alt="" width="600" height="200"></a></p>
   </li>
   </ol>
   <section><a id="why2" class="custom_anchor"></a></section>
   <h3><span style="font-family: arial,helvetica,sans-serif;">2. Getting Radio Selected Value Using Attribute Name with Value<br></span></h3>
   <p>In this approach, you'll target the radio buttons using the [name="fruit"] <strong>attribute selector</strong> and choose the checked one with <strong>:checked</strong>.</p>
   <ol>
   <li><strong>HTML:</strong> <br>Add the name="fruit" attribute to each radio button.
   <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in"><input type="radio" name="fruit" class="fruit-radio" value="apple"> Apple<br>
   <input type="radio" name="fruit" class="fruit-radio" value="banana"> Banana<br>
   <input type="radio" name="fruit" class="fruit-radio" value="orange"> Orange<br></span></span></span></code></pre>
   </li>
   <li><strong>jQuery:</strong><br>
   <ol>
   <li><code>$(document).ready(function() { Ensures the code executes after the document is fully loaded.

3. $("[name='fruit']").on("click", function() { Sets up a click event listener for the radio buttons with the name attribute set to "fruit".
4. var selectedFruit = $("[name='fruit']:checked").val();</code> Retrieves the value of the clicked radio button that is currently checked (selected).</li> <li><code>console.log("Selected fruit: " + selectedFruit);</code> Logs the selected fruit value to the console.</li> </ol> <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in">$(document).ready(function() {
    $("[name='fruit']").on("click", function() {
        var selectedFruit = $("[name='fruit']:checked").val();<br>         console.log("Selected fruit using attribute name with value: " + selectedFruit);<br>     });<br> });</span></span></span></code></pre> <ul> <li>The attribute selector [name="fruit"] targets all elements with the attribute name set to "fruit".</li> <li>The<strong> :checked selecto</strong>r narrows down the selection to the radio button that is currently checked.</li> <li>The <strong>.val() </strong>method retrieves the value of the selected radio button.</li> </ul> </li> </ol> </section> <div class="div-green"><span class="alert-header">Tip</span> If you're working with more complex forms, consider using labels and CSS classes to make your code more organized and readable.</div> <section><a id="why3" class="custom_anchor"></a> <h3><span style="font-family: arial,helvetica,sans-serif;">3. <strong>Getting Radio Selected Value Using Attribute Type and Value</strong></span></h3> <p>In this method, you'll use the [type="radio"] attribute selector to target the radio buttons and :checked to select the checked one.</p> <ol> <li><strong>HTML:<br></strong>Add the type="radio" attribute to each radio button. <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in"><input type="radio" name="fruit" class="fruit-radio" value="apple"> Apple<br> <input type="radio" name="fruit" class="fruit-radio" value="banana"> Banana<br> <input type="radio" name="fruit" class="fruit-radio" value="orange"> Orange<br></span></span></span></code></pre> </li> <li><strong>jQuery: </strong><br> <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in">$(document).ready(function() {
    $("[type='radio']").on("click", function() {
        var selectedFruit = $("[type='radio']:checked").val();<br>         console.log("Selected fruit using attribute type & value: " + selectedFruit);<br>     });<br> });</span></span></span></code></pre> <ul> <li>The attribute selector [type="radio"] targets all radio button elements on the page.</li> <li>The <strong>:checked selector</strong> filters the selection to the radio button that is currently checked.</li> <li>The <strong>.val() method</strong> retrieves the value of the selected radio button.</li> </ul> <p>In each of the three methods, the code <strong>listens for a click event</strong> on the radio buttons with the name "fruit." When a radio button is pressed, the value of the <strong>selected fruit is obtained</strong> using the proper process. The output is logged to the console, indicating the method's chosen fruit.<br>Using these three approaches, you may pick the way that best matches your coding style and project needs while still accomplishing the same purpose of getting the selected radio button value.</p> </li> </ol> <div class="div-pink"><span class="alert-header">Caution</span> Ensure that your radio buttons have unique values within the same group to avoid confusion when retrieving values using jQuery.<span class="alert-body"><br></span></div> <section><a id="why2" class="custom_anchor"></a></section> <h2><span style="font-family: arial,helvetica,sans-serif;"><strong>Some Alternative Approches</strong></span></h2> <p>  There are some alternative approaches for capturing the selected value of radio buttons using jQuery:</p> <section><a id="when2" class="custom_anchor"></a></section> <h3><span style="font-family: arial,helvetica,sans-serif;"><strong>1. Using the .change() Event</strong></span></h3> The <code>'.change()'</code> event is triggered when the value of an input element changes, typically when a user interacts with it. It is specifically designed for capturing changes in input elements, making it an ideal choice for radio buttons.<br> <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in">$(document).ready(function() {
    $(".fruit-radio").on("change", function() {
        var selectedFruit = $(".fruit-radio:checked").val();<br>         console.log("Selected fruit using .change() event: " + selectedFruit);<br>     });<br>});</span></span></span></code></pre> <section><a id="when2" class="custom_anchor"></a></section> <h3><span style="font-family: arial,helvetica,sans-serif;"><strong>2. Using the .click() Event<br></strong></span></h3> <p>The <strong>.click() </strong>event is triggered when an element is clicked. It's a common way to handle user interactions.</p> <pre><code><span style="font-family: arial,helvetica,sans-serif;"><span class="hljs-function"><span class="hljs-built_in">$(document).ready(function() {
    $(".fruit-radio").click(function() {
        var selectedFruit = $(".fruit-radio:checked").val();
        console.log("Selected fruit using class: " + selectedFruit);
    });
});

   However, for radio buttons, using the .click() event might not be the most optimal choice, as it won't cover all scenarios, such as keyboard navigation. 
   
   In simple words, this article will explain to you how to use jQuery to understand and capture your radio button selections. Websites get smarter and more engaging as a result of this.

References

Here are some reference links related to jQuery:

• jQuery Official Website
  https://jquery.com/

• jQuery Attributes
  https://api.jquery.com/category/attributes/