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.