Home » Html » Multiple radio button groups in one form

Multiple radio button groups in one form

Posted by: admin November 30, 2017 Leave a comment

Questions:

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>
Answers:

Set equal name attributes to create a group;

<form>
    <fieldset id="group1">
        <input type="radio" value="" name="group1">
        <input type="radio" value="" name="group1">
    </fieldset>

    <fieldset id="group2">
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
    </fieldset>
</form>

Questions:
Answers:

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="group1" name="group1">
        <input type="radio" value="group1" 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{{i}}" value="option{{i}}" (click)="checkAnswer(i+1)">{{option}}
</div>