How To Check Which Radio Button Is Selected Using JQuery?

When I was working on a project where I needed to determine which radio button a user had selected in a form. Radio buttons are a common UI element, but figuring out which one is checked programmatically can sometimes be tricky.

In this guide, I will share multiple methods to check which radio button is selected using jQuery, a popular JavaScript library that makes DOM manipulation much easier.

Let’s get into the different approaches you can use to detect and work with selected radio buttons in your web forms.

Table of Contents

Method 1: Use the checked Selector

The simplest way to check which radio button is selected is by using jQuery’s :checked selector. This selector targets input elements that are currently in a checked state.

Here, I have given the HTML code to create the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check Selected Radio Button</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <h2>Select an Option</h2>

    <form>
        <label>
            <input type="radio" name="options" value="Option 1"> Option 1
        </label><br>
        <label>
            <input type="radio" name="options" value="Option 2"> Option 2
        </label><br>
        <label>
            <input type="radio" name="options" value="Option 3"> Option 3
        </label>
    </form>

    <br>
    <button id="checkButton">Check Selected Option</button>

    <!-- Script section -->
    <script src="script.js"></script>

</body>
</html>

You can refer to the screenshot below to see the output.

Check Which Radio Button is Selected Using jQuery

Here’s how you can use it:

$(document).ready(function() {
    // Get the value of the selected radio button
    $('#checkButton').click(function() {
        var selectedValue = $('input[name="options"]:checked').val();
        alert('Selected radio button value: ' + selectedValue);
    });
});

You can refer to the screenshot below to see the output.

How to Check Which Radio Button is Selected Using jQuery

In this example, when the user clicks a button with the ID checkButton the code retrieves the value of the checked radio button within the group named “options”.

You can also get additional attributes of the selected radio button:

var selectedId = $('input[name="options"]:checked').attr('id');
var selectedData = $('input[name="options"]:checked').data('custom-attribute');

Read 51 jQuery Examples with Source Code

Method 2: Use the Change Event

If you want to detect when a user changes their selection, the change event is perfect:

$(document).ready(function() {
    $('input[name="options"]').change(function() {
        var selectedValue = $('input[name="options"]:checked').val();

        console.log('Selected radio button changed:');
        console.log('Value: ' + selectedValue);

        // Show popup message (since there's no #selectedOptionDisplay element in the HTML)
        alert('You selected: ' + selectedValue);
    });
});

You can refer to the screenshot below to see the output.

Using jQuery Check Which Radio Button is Selected

This approach is particularly useful when you need to act immediately after the user makes or changes their selection.

Check out JavaScript Examples [51 Useful Examples]

Method 3: Use prop() Method

The prop() method is another reliable way to check if a radio button is selected:

$(document).ready(function() {
    $('#checkButton').click(function() {
        // Loop through all radio buttons in the group
        $('input[name="options"]').each(function() {
            if($(this).prop('checked')) {
                var selectedValue = $(this).val();
                var selectedId = $(this).attr('id');

                alert('Selected: ' + selectedValue + ' (ID: ' + selectedId + ')');
                return false; // Break the loop once found
            }
        });
    });
});

This method is helpful when you need to perform more complex operations while checking each radio button’s state.

Read Execute Functions After Page Load Using jQuery

Method 4: Get Multiple Attributes from Selected Radio Button

Sometimes you need more than just the value of the selected radio button. Here’s how to get multiple attributes:

$(document).ready(function() {
    $('#getDetails').click(function() {
        var selected = $('input[name="paymentMethod"]:checked');

        if(selected.length > 0) {
            var value = selected.val();
            var id = selected.attr('id');
            var dataFee = selected.data('fee');
            var dataProcessingTime = selected.data('processing-time');

            var details = 'Payment Method: ' + value + '<br>' +
                         'ID: ' + id + '<br>' +
                         'Fee: $' + dataFee + '<br>' +
                         'Processing Time: ' + dataProcessingTime + ' days';

            $('#paymentDetails').html(details);
        } else {
            $('#paymentDetails').html('Please select a payment method');
        }
    });
});

This example assumes you have radio buttons with data attributes like this:

<input type="radio" name="paymentMethod" id="creditCard" value="Credit Card" data-fee="2.5" data-processing-time="1">
<input type="radio" name="paymentMethod" id="bankTransfer" value="Bank Transfer" data-fee="1.0" data-processing-time="3">

Check out Handle Dropdown Change Event in jQuery

Method 5: Work with Radio Buttons in Forms

When working with forms, you might want to validate that a radio button is selected before submitting:

$(document).ready(function() {
    $('#surveyForm').submit(function(e) {
        if($('input[name="satisfaction"]:checked').length === 0) {
            e.preventDefault(); // Prevent form submission
            $('#errorMessage').text('Please select a satisfaction level before submitting.');
            return false;
        }

        // Form is valid, allow submission
        $('#errorMessage').text('');
        return true;
    });
});

This code checks if any radio button in the “satisfaction” group is selected before allowing the form to be submitted.

Read Check if a Checkbox is Checked Using jQuery

Real-World Example: Product Configuration System

Let’s look at a practical example where checking selected radio buttons is essential. Imagine a product configuration system for a custom PC builder website:

$(document).ready(function() {
    // Initial price
    var basePrice = 999;
    updateTotalPrice();

    // Listen for changes to any component selection
    $('input[name="processor"], input[name="memory"], input[name="storage"], input[name="graphics"]').change(function() {
        updateTotalPrice();
    });

    function updateTotalPrice() {
        var total = basePrice;

        // Add processor cost
        var processor = $('input[name="processor"]:checked');
        if(processor.length > 0) {
            total += parseFloat(processor.data('price'));
            $('#processorChoice').text(processor.val());
        }

        // Add memory cost
        var memory = $('input[name="memory"]:checked');
        if(memory.length > 0) {
            total += parseFloat(memory.data('price'));
            $('#memoryChoice').text(memory.val());
        }

        // Add storage cost
        var storage = $('input[name="storage"]:checked');
        if(storage.length > 0) {
            total += parseFloat(storage.data('price'));
            $('#storageChoice').text(storage.val());
        }

        // Add graphics card cost
        var graphics = $('input[name="graphics"]:checked');
        if(graphics.length > 0) {
            total += parseFloat(graphics.data('price'));
            $('#graphicsChoice').text(graphics.val());
        }

        // Update the displayed total
        $('#totalPrice').text('$' + total.toFixed(2));
    }
});

This example shows how checking selected radio buttons can power an interactive pricing calculator that updates in real-time as users make selections.

Check out Call a JavaScript Function When a Checkbox is Checked or Unchecked

Best Practices for Working with Radio Buttons

Always use the same name attribute for radio buttons that belong to the same group
Use unique ID attributes for each radio button for proper labeling
Add labels for all radio buttons to improve accessibility
Check if a selection exists before trying to access its properties
Use data attributes for storing additional information related to each option

Working with radio buttons is a common task in web development, and jQuery makes it easy to detect and respond to user selections.

The methods that I have explained in this guide are: using the checked selector, using the change event, using the prop() method, getting multiple attributes from selected radio buttons, and working with radio buttons in forms.