Clash Royale CLAN TAG#URR8PPP

Check Radio Buttons by Class

$(".test").each(function(i)
this.checked = true;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="1" name="radio" class="test" id="tr1" />
<input type="radio" value="1" name="radio" class="radio" id="tr2" />


<input type="radio" value="1" name="radio" class="radio2" id="tr3" />
<input type="radio" value="1" name="radio" class="test" id="tr4" />
<button class="button">Click</button>

I have two sets of radio buttons and I would like to have the class "test" ticked by default.

How would I go about doing this with radio buttons as we can now only tick one radio button

$('.test').prop('checked', true)

2 Answers
2

You should name the two sets differently because if they are all named radio only one of them can be checked at a time. Simply rename the second set to something else like radio2 in my example below and then the sets will work independent of each other.

radio

radio2

$(".test").each(function(i)
this.checked = true;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="1" name="radio" class="test" id="tr1" />
<input type="radio" value="1" name="radio" class="radio" id="tr2" />


<input type="radio" value="1" name="radio2" class="radio2" id="tr3" />
<input type="radio" value="1" name="radio2" class="test" id="tr4" />
<button class="button">Click</button>

By definition, radio buttons are a group of <input> elements sharing the same name with the out-of-the-box behavior that when one of them is selected they give the containing <form> namespace defined by their common name the value of the selected one and automatically deselect any other radio button with same name.

<input>

name

<form>

name

name

It has been specifically designed for this use-case (where from multiple options users are allowed to pick one).

If your scenario requires to enable users to select more than one, either

name

<input type="checkbox">

<select>

multiple="true"

To sum it up: no matter what you do, no decent browser will allow you to select more than one <input type="radio"> with the same name in the same <form> element. By any method. And, even if it would have theoretically been possible, trying to get the value of that namespace would have failed.

<input type="radio">

name

<form>

Radio buttons are like Highlanders: "There can be only one".

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.