Создание вопроса с несколькими вариантами ответов и разрешение 2 или более вариантов ответа в bootstrap - PullRequest
Новая
       35

Создание вопроса с несколькими вариантами ответов и разрешение 2 или более вариантов ответа в bootstrap

0 голосов
/ 16 июня 2020

Ссылаясь на https://getbootstrap.com/docs/4.0/components/forms/, можно создать вопрос с несколькими вариантами ответов с одним допуском выбора с помощью этого кода: 

        <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
      <label class="form-check-label" for="gridRadios1">
        First radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
      <label class="form-check-label" for="gridRadios2">
        Second radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
      <label class="form-check-label" for="gridRadios3">
        Third radio
      </label>
    </div>

Но мне нужно создать вопросы с несколькими вариантами ответов с двумя или, возможно, больше возможностей выбора. Как я могу этого добиться?

1 Ответ

0 голосов
/ 16 июня 2020

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

<h5>Question 1:</h5>
<div class="form-check">
  <input class="form-check-input" type="radio" name="Form1" id="form1Option1" value="option1" checked>
  <label class="form-check-label" for="form1Option1">
    First answer
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="Form1" id="form1Option2" value="option2">
  <label class="form-check-label" for="form1Option2">
    Second answer
  </label>
</div>

<h5>Question 2:</h5>
<div class="form-check">
  <input class="form-check-input" type="radio" name="Form2" id="form2Option1" value="option1" checked>
  <label class="form-check-label" for="form2Option1">
    First answer
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="Form2" id="form2Option2" value="option2">
  <label class="form-check-label" for="form2Option2">
    Second answer
  </label>
</div>
...