Multiple radio button groups in one form
Solution 1
Set equal name
attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" value="value1" name="group1">
<input type="radio" value="value2" name="group1">
</fieldset>
<fieldset id="group2">
<input type="radio" value="value1" name="group2">
<input type="radio" value="value2" name="group2">
<input type="radio" value="value3" name="group2">
</fieldset>
</form>
Solution 2
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Solution 3
Just do one thing, We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
Solution 4
in input field make name same like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
Solution 5
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
AlexG
do do class do class if. do do class do class if. do! do class! do class if do class if! do class if inline do class if inline do class if inline bool this delete define! this do int break sizeof public try if struct for auto static... while! while! // By Rammstein
Updated on July 08, 2022Comments
-
AlexG almost 2 years
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form> <fieldset id="group1"> <input type="radio" value=""> <input type="radio" value=""> </fieldset> <fieldset id="group2"> <input type="radio" value=""> <input type="radio" value=""> <input type="radio" value=""> </fieldset> </form>
-
user3182532 over 6 yearsif value equals "" every time, how do I know which radio button was chosen? how do I know if a radio button was chosen at all?
-
pankijs over 6 yearsInsert your own values
-
Marthyn Olthof about 5 yearsCan you specify how this fixes the question's issue? This also creates just one group, does it add a unique name to the inputs of each group you create this way?