JQuery Radio button

Radio buttons are used where mutually exclusive options are given to user to select.

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.
<script>
  var radio_selected = $('input[name=options]:checked', '#f1').val()
</script>
Here we are displaying selected radio button value inside one div layer.

Getting selected radio button value

We can read the user selected radio button value by using this in Jquery
$(this).val()
When event is not associated with radio buttons
$("input[name=r1]:checked").val()
Above code will return the value associated with the selected radio button. So to execute this code 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=t1)
<script>
$(document).ready(function() {

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

})
</script>

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')

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);

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);

Enable or disable single Radio buttons

$("#opt1").attr("disabled",true);

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.

Visitors Rating
Your Rating


Google+
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.

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer