jQuery Radio Button

Radio buttons with the same name form a group in which only one option can be selected. Use :checked to read the selected value and .prop() to change checked/disabled state.

Radio Button HTML Top ↑

<label>
    <input type="radio"
           name="r1"
           id="r1"
           value="option1"
           checked>
    Option 1
</label>

<label>
    <input type="radio"
           name="r1"
           id="r2"
           value="option2">
    Option 2
</label>

Read the Selected Value Top ↑

const selected =
    $( 'input[name="r1"]:checked' ).val();

Demo: read selected radio value →

Handle Radio Selection Top ↑

$( 'input[name="options"]' )
    .on( "change", function () {
        $( "#d1" ).text(
            $( this ).val()
        );
    });

Demo: radio button event →

Redirect after Selection Top ↑

$( 'input[name="enq_status"]' )
    .on( "change", function () {
        const params = new URLSearchParams({
            enq_status: $( this ).val()
        });

        window.location.assign(
            "radio-button-submit.php?" +
            params.toString()
        );
    });

Full page-reload example with PHP →

Read name, ID and data-* Attributes Top ↑

$( 'input[type="radio"]' )
    .on( "change", function () {
        const name = this.name;
        const id = this.id;
        const group =
            $( this ).data( "group" );

        console.log( name, id, group );
    });

Demo: radio attributes →

Reset, Check or Uncheck Top ↑

$( 'input[name="options"]' )
    .prop( "checked", false );

$( "#radio-1" )
    .prop( "checked", true );

The older .attr("checked") compatibility example is no longer recommended for current jQuery; checked state is a property.

Enable or Disable Radio Buttons Top ↑

$( 'input[name="options"]' )
    .prop( "disabled", true );

$( "#opt1" )
    .prop( "disabled", false );

$( "#opt1, #opt2" )
    .prop( "disabled", true );

Use Radio Values as Boolean Settings Top ↑

$( 'input[name="r1"]' )
    .on( "change", function () {
        const enabled =
            $( this ).val() === "true";

        $( "#my_tabs" ).tabs(
            "option",
            "collapsible",
            enabled
        );
    });

This particular example requires the jQuery UI Tabs widget.

Checkboxradio and Option Groups Top ↑

jQuery UI Checkboxradio can style native radio groups. The original tutorial also includes option-group examples:

Demo: radio controls with OPTGROUP-related data →

HTML OPTGROUP tutorial

← Textbox · Listbox · Buttons

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• bs-form-inputs.php
• bs.php
• event-click.php
• msg-demo/radio-select.php
• msg-demo/radio3.php
• msg-demo/radio4.php
• msg-demo/radio5.php
• msg-demo/radio6.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: