I have multiple radiobutton lists within a fieldset tag.

I only ever want one item to be selectable from the whole list... currently i can select one item from each radio button list - which is normal

I know the proper way would to do this would be to have one long radio button list, but that is not an option.

Is there a way in javascript/jquery that given the fieldset class name - say

<fieldset class="mylistofradiolists"> that when a radio button within it is selected all other items are deselected and only that single one remains selected

Thanks

I have multiple radiobutton lists within a fieldset tag.

I only ever want one item to be selectable from the whole list... currently i can select one item from each radio button list - which is normal

I know the proper way would to do this would be to have one long radio button list, but that is not an option.

Is there a way in javascript/jquery that given the fieldset class name - say

<fieldset class="mylistofradiolists"> that when a radio button within it is selected all other items are deselected and only that single one remains selected

Thanks

• javascript
• jquery
• html

• 1 you can use the same name for all the radio button inside one fieldset – Miqdad Ali Commented Jul 3, 2012 at 10:54
• 1 @MiqdadAli "I know the proper way would to do this would be to have one long radio button list, but that is not an option." He's already said that's not possible, for whatever reason. – Anthony Grist Commented Jul 3, 2012 at 10:55

2 Answers 2

You can do that with the following code

$radios =  $('.mylistofradiolists :radio');
$radios.on('change',function(){
   $radios.not(this).prop('checked',false);
});

When an radio is selected all other radio's except that are deselected within that container.

It's better to use

$radios =  $('.mylistofradiolists [type=radio]');

Instead of

$radios =  $('.mylistofradiolists :radio');

As the doc for :radio selector says

Because :radio is a jQuery extension and not part of the CSS specification, queries using :radio cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

For better performance in modern browsers, use [type="radio"] instead.

You can achieve the functionality of selecting only one radio button from list of radio buttons which are seperated by fieldset tag by keeping each "name" attribute of the radio button same.

e.g :- for first field set - keeping the radio button name field same.

<fieldset >
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<fieldset >

and for second fieldset , keeping the name attribute same :-

<fieldset >
<input type="radio" name="food" /> : Indian<br />
<input type="radio" name="food" /> : UK<br />
<fieldset >

Hope this anser user question :)