JQuery Radio button

Radio buttons are used where mutually exclusive options are given to user to select.
class= 'form-check form-check-inline' can be used for showing horizontally ( in one line ) using Bootstrap 4 design.
<div class='form-check form-check-inline'>
 <label>
<input type='radio' name='r1' id='r1' value='option1' checked>Option 1</label>
</div>

<div class='form-check form-check-inline'>
 <label>
  <input type='radio' name='r1' id='r2' value='option2' > Option 2</label>
</div>

<div class='form-check form-check-inline'>
  <label>
  <input type='radio' name='r1' id='r3' value='option3' > Option 3</label>
</div>

  • Video Tutorial on JQuery Radio Button


Reading the default or selected radio button value on page load.

When no event is occurred we can read the selected radio button value like this. ( f1 is the id of the form)
<script>
  var radio_selected = $('input[name=options]:checked', '#f1').val()
</script>
DEMO: Reading selected radio button value after page load
Here we are displaying selected radio button value inside one div layer.

Getting selected radio button value using NAME

We can read the user selected radio button value by using this in Jquery
$(this).val()
When event is not associated with radio buttons ( group of radio button with name=r1 ) , the value of selected radio button is here.
$("input[name=r1]:checked").val()
Above code will return the value associated with the selected radio button.

Radio button with click event

We will use one click event so any radio button is clicked by the user this part of the code will be triggered.

The returned value will be displayed inside one div tag ( id=d1)
<script>
$(document).ready(function() {

$("input:radio[name=options]").click(function() {
 $("#d1").css("background-color", "yellow"); // color of the background
 $('#d1').html($(this).val());
})

})
</script>
DEMO: Reading the selected value of the Period button

Page redirect on selection of Radio button

Here the name of the group of radio buttons is enq_status. Here we are collecting the vlaue of the selected radio button and then creating a query string to send the data to same page (reload ) or to a different page.
$("input:radio[name=enq_status]").click(function(){
 my_str='enq_status='+$(this).val() // collect the value of selected radio button
 window.location = "list.php?"+my_str; // reload or redirect the page wth value
});	
PHP script to manage Radio button click event to submit data

Event of Any radio button of page

Irrespective of id, name, class associated if any radio button on page is clicked or changed then this event will be executed.
$("input[type='radio']").change(function() {
// Your code for any radio button change event
})

Getting radio button name

Sometime we are collecting records from database table and wants to give options to user to change one filed from True to False or vice versa

Based on the stored value of the record we will have one of the two radio button selected. Here once the user click one radio button, we need to know two variables. One is the record number and second is out of two which radio button is clicked ( True of False )

Here we will keep record number as name of the radio button ( for both radio buttons of each record ) and one radio button with value as True and other one value as False.

As mentioned in above code we can read the value , similarly here is the code to read the name of the radio button which is clicked.
$(this).attr('name')

Collecting custom data attribute

If there are several radio buttons on page with different class, id, value and name, we can get details of clicked radio button along with attributes for our processing. Here we have used one additional custom attribute ( allowed in HTML5 , name should start with string 'data-' )
<input type='radio' name='my_name' class=r2 id=my_id 
 data-group_type='group-1' value='1'>FAST
$("input[type='radio']").change(function() {
$(this).attr('name') // get name
$(this).attr('class') // get Class
$(this).attr('id') // id 
$(this).attr('data-group_type') // additional custom data attribute 
})
HTML5 data-*
We can use additional data attributes as per the format given in HTML5.
<input type='radio' name='options' id='opt1' value='option1' 
	data-name='my_option' data-group=first data-type=sel1 >
We can read the value of data attributes like this.
$(this).data('group')
DEMO: Additional Attributes of radio buttons

Resetting radio buttons

Once the selection is done by the user we can reset the same selection ( no selection ), here is the code.
$("input:radio[name=options]").prop('checked', false);
DEMO: Resetting radio buttons

Check or Uncheck radio button

Using id of the radio button we can select or de-select the radio button.
$("#radio-1").prop("checked", true);  // JQuery verison >= 1.6 
$("#radio-1").attr("checked", "checked");  // JQuery verison < 1.6 
Uncheck
$("#radio-1").prop("checked", false);  // JQuery verison >= 1.6
DEMO: Select radio button using Button Click

Enable or disable all Radio buttons

By click event of a button we can enable or disable the group of radio buttons.
$("input:radio[name=options]").attr("disabled",true);
DEMO: Enable or Disable Radio buttons

Enable or disable single Radio buttons

$("#opt1").attr("disabled",true);
DEMO: Enable or Disable single Radio buttons

Disabling two radio buttons

$("#opt1,#opt2").attr("disabled",true);
Using above concepts we can enable or disable based on the selection of the user. Let us say user has to select one of the two options, programming or graphics design. Based on the selection or choice of the user we will enable or disable two matching options out of four given options.

If programming is slected by user then options of graphics design will be disabled.

Assigning Boolean value ( True or False ) by using value of radio button

Directly we can’t use radio button value to set any status to true of false as it is in the form of string. We can the set value of a variable to Boolean value ( true ) like the code below and then use the variable set any object to true . Here is to code to set the collapsible option of Jquery UI tab .
$("input:radio[name=r1]").click(function() {
var sel = ($(this).val() == 'true');
$( "#my_tabs" ).tabs( "option", "collapsible", sel );
})
DEMO: Disable & Enable set of radiob buttons based on user selection

Checkboxradio JQuery UI

We can enhance these buttons by adding effects , user interactions and styles by using Checkboxradio UI.
Radio & checkbox to themeable buttons with hover & active style JQuery UI

Managing OPTGROUP attributes

We can make a group of options of a dropdown listbox by using click event of a radio button. Options are grouped under <OPTGROUP> tag.

Script of Video tutorial

<html>
<head>
<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
</head>
<body>
<input type='radio' name='options' id='opt1' value='option1'> Option1
<input type='radio' name='options' id='opt2' value='option2'> Option2
<input type='radio' name='options' id='opt3' value='option3'> Option3
<input type='radio' name='options' id='opt4' value='option4'> Option4 
<br><span id=display></span>
<br>
<button id=b1>Disble</button> <button id=b2>Enable</button> <button id=b3>Disable All</button> <button id=b4>Enable All</button>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Jquery code here ///
$('input[type=radio]').change(function(){
var data=$(this).data('group');
$('#display').html(data)
});
////
$('#b1').click(function(){
$('#opt1,#opt2').attr('disabled',true);
});

$('#b2').click(function(){
$('#opt1,#opt2').attr('disabled',false);
});

$('#b3').click(function(){
$('input:radio[name=options]').attr('disabled',true);
});

$('#b4').click(function(){
$('input:radio[name=options]').attr('disabled',false);
});
///

////
});
</script>
</body>
</html>
DEMO of managing OPTGROUP disabled option. Textbox Managing Buttons ListBox

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Sandra

    23-07-2016

    Thank you very much for the demo "Disabling two radio buttons".

    I spend several days to find out how to add a required attribute to a textarea after a radio button has been checked. This demo helped me to finally find a working code.






    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer