it-swarm.com.ru

Нажав на текст, выберите соответствующий переключатель

Я создаю веб-приложение для викторины с использованием PHP. Каждый вопрос состоит из отдельного <label> и имеет 4 возможных варианта выбора, используя radio buttons, чтобы позволить пользователю выбрать свой ответ. Текущий HTML для одного вопроса выглядит так: 

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

Я бы хотел, чтобы пользователь имел возможность щелкнуть текст, связанный с переключателем. Прямо сейчас пользователь может нажать только на саму кнопку-переключатель - что я считаю довольно громоздкой задачей. 

Я прочитал Невозможно выбрать конкретную опцию переключателя, нажав на текст выбора , и предложение указывает на соответствие атрибутов for и id тегов. Я сделал это, и это все еще не работает. 

Мой вопрос: Я хотел бы иметь возможность щелкать текст объекта <input type="radio">, а не только выбирать саму кнопку-переключатель. Я знаю, что читал об этом раньше, но не могу найти решение своей проблемы. Любая помощь или предложения очень ценятся!

75
Abundnce10

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

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">
  <label for="349">Abe</label>
  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">
  <label for="351">Andre</label>
  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form>

Следует помнить, что два элемента никогда не должны иметь одинаковый идентификатор. Атрибут name используется для того, чтобы переключатели функционировали как группа и допускали только один выбор за раз.

154
Nathan

Кажется, между переключателем и надписью есть небольшое пространство, которое невозможно щелкнуть, если это сделано в соответствии с ответом Nathan. Вот как можно объединить их (см. эту статью ):

<form>
    <p>What is my middle name?</p>
    <br>
    <label><input id="349" type="radio" value="1" name="question1">Abe</label>
    <br>
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label>
    <br>
    <label><input id="351" type="radio" value="3" name="question1">Andre</label>
    <br>
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label>
    <br>
</form>
32
user21820

Вложение тега ввода в тег метки гарантирует, что метка появится прямо рядом с переключателем. Используя предложенные ранее подходы, вы можете поместить метку метки в любом месте html-файла, и при нажатии будет выбрана соответствующая радиокнопка. Проверь это:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>

Делая это таким образом, вы устраняете этот недостаток:

<form>
  <p>What is my middle name?</p>
  <br>
  
  <label>
    <input id="349" type="radio" value="1" name="question1"/>Abe
  </label>
  <br>
  
  <label>
    <input id="350" type="radio" value="2" name="question1"/>Andrew
  </label>
  <br>
  
  <label>
    <input id="351" type="radio" value="3" name="question1"/>Andre
  </label>
  <br>
  
  <label>
    <input id="352" type="radio" value="4" name="question1"/>Anderson
  </label>
  <br>
</form>

1
Neo

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

1
endyourif

Я делал это годами, но ни одна из них не работала для меня, используя переменные.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

и вот источник:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
0
Gymus

Вы можете сделать это так

 <label for="1">hi</label>
 <input type="radio" id="1" />

Поэтому, если вы нажимаете на текст или метку, он выбирает переключатель ........ Но если вы сделаете это ...

<label for="1">//</label>

и вы добавляете это к тому, что код, который я написал перед этим, затем, если вы нажмете на 2-й ярлык, то он также выберет радио.

0
Samuel Chen