Несколько групп переключателей в одной форме

114

Возможно ли иметь несколько групп переключателей в одной форме? Обычно выбор одной кнопки отменяет выбор предыдущей, мне просто нужно снять выделение с одной из группы.

<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
источник
16
Дайте им имена (то есть<input type="checkbox" name="checkGroup1" value =""/>
Паыля

Ответы:

195

Установите одинаковые nameатрибуты для создания группы;

<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
если значение равно "" каждый раз, как узнать, какой переключатель был выбран? как мне узнать, был ли вообще выбран переключатель?
user3182532
23
Вставьте свои собственные значения
pankijs
12

Просто сделайте одно: нам нужно установить свойство name для тех же типов. например, для

Попробуйте ниже:

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

А также мы можем сделать это в angular1, angular 2 или 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>  
Кунвар Сингх
источник
8

Это очень просто: вам нужно сохранить разные имена для каждой группы радиовходов.

      <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

Чтобы создать группу входов, вы можете создать собственный элемент html

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

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

чтобы сохранить выбранную опцию в каждой группе, вам нужно добавить атрибут имени к входам в группе, если вы не добавите его, тогда все будет одной группой.

user3844710
источник
2
Не могли бы вы указать, как это решает проблему? Это также создает только одну группу, добавляет ли это уникальное имя к входам каждой группы, которую вы создаете таким образом?
Marthyn Olthof
2

в поле ввода сделайте имя таким же, как

<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" >
Мосфек Аник
источник