Question

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

Answer 1

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.