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

pankijs
fonte
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>  
Kunvar Singh
fonte
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

Nahid Rehman
fonte
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.

user3844710
fonte
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" >
Mosfeq Anik
fonte