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


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>

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

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


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" >
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.