Vários grupos de botões de opção em um formulário


113

É possível ter vários grupos de botões de opção em um único formulário? Normalmente, selecionar um botão desmarca o anterior, só preciso desmarcar um de um grupo.

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

16
Dar-lhes nomes (ou seja<input type="checkbox" name="checkGroup1" value =""/>
— paul

Respostas:


193

Defina nameatributos iguais para criar um grupo;

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


1
se o valor for igual a "" todas as vezes, como posso saber qual botão de opção foi escolhido? como faço para saber se um botão de opção foi escolhido?
— user3182532

23
Insira seus próprios valores
— pankijs

12

Basta fazer uma coisa: precisamos definir a propriedade name para os mesmos tipos. por exemplo.

Experimente abaixo:

<form>
    <div id="group1">
        <input type="radio" value="val1" name="group1">
        <input type="radio" value="val2" name="group1">
    </div>
</form>

E também podemos fazer no angular1, angular 2 ou no jquery também.

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

8

Isso é muito simples, você precisa manter nomes diferentes de cada grupo de entrada de rádio.

      <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


2

Para criar um grupo de entradas, você pode criar um elemento html personalizado

window.customElements.define('radio-group', RadioGroup);

https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47

para manter a opção selecionada em cada grupo, você precisa adicionar o atributo de nome às entradas no grupo; se você não adicioná-lo, então tudo será um grupo.


2
Você pode especificar como isso corrige o problema da pergunta? Isso também cria apenas um grupo, adiciona um nome exclusivo às entradas de cada grupo que você cria dessa maneira?
— Marthyn Olthof de

2

no campo de entrada faça o nome igual a

<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" >
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.