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


87

Я создаю веб-приложение викторины с использованием 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">объекта, а не только саму радиокнопку. Я знаю, что читал об этом раньше, но не могу найти решение своей проблемы. Любая помощь или предложения очень приветствуются!

Ответы:


176

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

<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Атрибут используется таким образом , что переключатели функционируют в качестве группы , и только позволяют единый выбор одновременно.


7
Очень просто. Обожаю, когда заново открывается почти скрытая особенность тегов
The Thirsty Ape

38

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

<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>

2
Я предпочитаю этот ответ. Но уверены ли вы, что при таком подходе вам вообще нужны атрибуты «for»?
Piddu

@Piddu: Думаю, ты прав, поэтому я обновил свой ответ. Благодарность!
user21820

Другой вариант избежать лишнего пробела между переключателем и меткой - просто не помещать его туда <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(без пробелов или новых строк между тегами)
Арье Эйдельман

1
Я только что проверил свой путь в chrome и firefox и обнаружил, что он уменьшает пространство без клика с 7 до 3 пикселей, удаляя символ пробела. увидеть, почему-есть-необъяснимый-разрыв-между-этими-встроенными-блочными-элементами-блоками . три оставшихся пикселя являются правым полем по умолчанию на переключателе margin: 3px 3px 0 5px;(это более заметно в firefox, поскольку по умолчанию есть эффект наведения), который можно исправить с помощью CSS, удалив поле и заменив его заполнением.
Arye Eidelman

1
@AryeDovEidelman: Понятно, спасибо за расследование! Хотя для простоты я буду помещать все это в этикетку. =)
user21820

1

Тег label должен быть вокруг каждого ответа, например, вокруг Abe, Andrew и т. Д., И он должен быть уникальным для каждого из них.


1

Вложение тега ввода в тег метки гарантирует, что метка отображается рядом с переключателем. С помощью предложенных ранее подходов вы можете поместить тег label в любом месте 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>


0

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

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

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

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

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


0

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

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