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


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.