Multiple radio button groups in one form

Question

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>

score 318 · Accepted Answer · edited Apr 18 '23 at 12:31

318

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>

edited Apr 18 '23 at 12:31

Boann

48,794
16
117
146

answered Feb 16 '15 at 14:44

pankijs

6,531
3
16
13

1

if 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? – user3182532 Sep 18 '17 at 09:22
34

Insert your own values – pankijs Sep 18 '17 at 10:59

score 18 · Answer 2 · answered Mar 28 '19 at 11:38

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

Kunvar Singh · Answer 3 · 2019-04-27T07:23:39.213

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>

score 4 · Answer 4 · answered Jun 01 '19 at 16:50

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" >

user3844710 · Answer 5 · 2019-02-21T12:20:03.557

0

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.

edited Feb 21 '19 at 12:20

answered Feb 20 '19 at 11:07

user3844710

39
4

4

Can 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? – Marthyn Olthof Feb 20 '19 at 11:29

Multiple radio button groups in one form

5 Answers5

Linked

Related