Wiele grup przycisków opcji w jednym formularzu

113

Czy można mieć wiele grup przycisków opcji w jednym formularzu? Zwykle wybranie jednego przycisku powoduje odznaczenie poprzedniego, po prostu muszę mieć odznaczony jeden z grup.

<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
źródło
16
Nadaj im imiona (np.<input type="checkbox" name="checkGroup1" value =""/>
Paweł

Odpowiedzi:

194

Ustaw równe nameatrybuty, aby utworzyć grupę;

<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
źródło
1
jeśli za każdym razem wartość jest równa „”, skąd mam wiedzieć, który przycisk opcji został wybrany? skąd mam wiedzieć, czy w ogóle wybrano przycisk opcji?
user3182532
23
Wstaw własne wartości
pankijs
12

Po prostu zrób jedną rzecz, musimy ustawić właściwość name dla tych samych typów. np.

Spróbuj poniżej:

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

A także możemy to zrobić w angular1, angular 2 lub też w jquery.

<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
źródło
8

Jest to bardzo proste, musisz zachować różne nazwy każdej grupy wejść radiowych.

      <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
źródło
2

Aby utworzyć grupę danych wejściowych, możesz utworzyć niestandardowy element HTML

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

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

aby zachować wybraną opcję w każdej grupie, musisz dodać atrybut nazwy do wejść w grupie, jeśli go nie dodasz, wszystko jest jedną grupą.

user3844710
źródło
2
Czy możesz określić, jak to rozwiązuje problem z pytaniem? To również tworzy tylko jedną grupę, czy dodaje unikalną nazwę do danych wejściowych każdej utworzonej w ten sposób grupy?
Marthyn Olthof
2

w polu wejściowym nadaj nazwę tak samo jak

<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
źródło