How To Get Value of Selected Radio Button Using jQuery

In this article we will see How To Get Value of Selected Radio Button Using jQuery. :checked selector and .val() method can be used to read value of radio button.

:checked selector

The :checked selector is used to select all checked checkboxes, selected radio buttons, and all options of select element.

Syntax

A simple example of :checked selector is shown below.

var length = $( "input:checked" ).length;

val() method

The .val() method is used to get the value of input elements like radio button, select element and textarea element. The .val() method does not require any arguments.

Syntax

A simple example of .val() method is shown below.

var Value = $( "#age" ).val();

Example 1

This example alerts the value of the selected radio button.

<form>
        <div>
            <input type="radio" name="car" value="Ford" id="orange">
            <label>Ford</label>
        </div>
        <div>
            <input type="radio" name="car" value="Jeep" id="apple">
            <label>Jeep</label>
        </div>
        <div>
            <input type="radio" name="car" value="Tesla" id="banana">
            <label>Tesla</label>
        </div>
</form>
    
<script>
        $('input[name="car"]').on("click", function() {
            var car = $('input[name="car"]:checked').val();
            alert(car);
        });
</script>

Demo

Example 2

This example also alerts the value of the selected radio button when the button is clicked.

<p>Your Gender?</p>
<input type="radio" name="gender" value="male">
<label>Male</label>
<input type="radio" name="gender" value="female">
<label>Female</label>
<input type="button" value="Get Gender">
    
<script>
   $(document).ready(function() {
   $("input[type='button']").click(function() {
   var gender = $("input[name='gender']:checked").val();
   alert(gender);
     });
   });
</script>

Demo

Your Gender?

Example 3

This example will change the background-color of the Demo div to the selected color using value of radio button.

<form>
        <div class="form-group">
            <label><strong>Select Your color</strong>:-</label><br>
            <label><input type="radio" name="color" value="red">Red</label>
            <label><input type="radio" name="color" value="yellow">Yellow</label>
            <label><input type="radio" name="color" value="blue">Blue</label>
            <label><input type="radio" name="color" value="orange">Orange</label>
        </div>
        <div class="form-group text-center">
            <button class="btn" type="button">Apply Color</button>
        </div>
</form>
<div id='div' style='padding:30px 10px;'>Demo</div>
    
<script type="text/javascript">
        $('.btn').click(function() {
            var value = $('input[name="color"]:checked').val();
            $('#div').css('background', value)
        });
</script>

Demo



Demo

Feel free to copy the code of any example and use it in anywhere.