Multiple Radio Button Groups in One Form

Multiple radio button groups in one form

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>

Multiple radio button groups in one Angular Reactive form

A radio buttons are grouped by name, In your example you are not providing any name so all the radio buttons are grouped as a single radio group.Add name to each radio button to avoid deselecting others.

<div class="rb-wrapper">
  <input
    [id]="id"
    type="radio"
    [name]="name"
    [value]="value"
    [formControl]="ctrl"
    [checked]="checked"
  />
  <p>
    {{ label }}
  </p>
</div>

Forked Working Example

How can I make multiple radio button groups with same name?

Use your radio button groups in separate form tags like this. Only one name group can be present in one form.

<div class="col-md-4">  <form>    <ul class="list-unstyled">        <li><strong>England</strong></li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Chelsea                </label>            </div>        </li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Mu                </label>            </div>        </li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Arsenal                </label>            </div>        </li>    </ul>  </form></div><div class="col-md-4">  <form>    <ul class="list-unstyled">        <li><strong>Spain</strong></li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Madrid                </label>            </div>        </li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Barcelona                </label>            </div>        </li>        <li>            <div class="checkbox">                <label>                    <input type="radio" name="test"> Atletico                </label>            </div>        </li>    </ul>  </form></div>

how-to submit form with multiple groups of radio buttons?

You just need to remove the other two submit buttons and only display one. As long as it is inside the <form> it will submit all the radio button "groups" to the $_POST.

Also, remove the select tags as you are using them incorrectly. Only an option or optgroup should be nested inside a select element.

You will need to reference each one individually to see the selected response:

echo $_POST['radioA'];
echo $_POST['radioB'];
echo $_POST['radioC'];

How would I use multiple radio buttons and multiple groups in one form so that only 1 button per row and column can be selected?

If you do not want to use same name for everything then write a JavaScript function - which on radio-check calls a functions which removes other checked radios.

I don't know how your code looks like but for this snippet you can get all input[type:radio] under class "radio-inline" and similarly distinguish using a div/label between various rows.

For selection/function on radio buttons using JavaScript - refer : https://codepen.io/joexadrez/pen/DzctL

Why can I check multiple radio buttons?

All radio buttons that share the same name and are controls in the same form are part of a group.

Only one radio button in a group can be checked.

You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.

You need to put them in the same group (by making them share a name) if you only want one of them to be selected.

(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).

<form>  <fieldset>    <legend>Thing that is being chosen</legend>
    <input type="radio" name="name" id="nameA" value="nameA">    <label for="nameA">Choice A</label>
    <input type="radio" name="name" id="nameB" value="nameB">    <label for="nameB">Choice B</label>
  </fieldset></form>

Updating state with multiple radio button groups in one component react

In handleChange, the following is not a valid state update. Due to that, your state was missing options entry after each radio button click.

setQuestionState(...options, {nextState});

1st way

The above line should be replaced with the following.

setQuestionState({ ...questionState, options: nextState });

Edit modest-ramanujan-mj25i

2nd way

It is always safe to use the callback version of updating the state. Therefore, handleChange function should be corrected as below.

  const handleChange = (e) => {
    const { name, value } = e.target;
    setQuestionState((prevState) => {
      return {
        ...prevState,
        options: prevState.options.map((opt) => {
          if (opt.radioName !== name) {
            return { ...opt };
          } else {
            return { ...opt, selected: value };
          }
        })
      };
    });
  };

Edit cranky-cohen-cjseb

Multiple Radio button groups are linking, causing strange behavior

The object that should be used to make the row buttons exclusive is "group" but this is a local variable that is destroyed when the new_radio_pair method finishes executing, causing it not to behave as previously thought.

The solution is to extend the life cycle and for this there are several options such as making it an attribute of the class, adding it to a container or class that has a longer life cycle, or in the case of QObjects, passing it another QObject as a parent(like self) that has a longer life cycle, and that is the best solution for this case:

group = QButtonGroup(self)

Multiple Radio Button Groups in One Form