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

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

79 голосов
/ 23 октября 2011

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

Ответы [ 6 ]

160 голосов
/ 23 октября 2011

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

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

32 голосов
/ 14 декабря 2015

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

<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 голос
/ 14 октября 2017

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

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

0 голосов
/ 25 января 2019

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

    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 голосов
/ 10 октября 2016

Вы можете сделать это следующим образом 

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

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

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

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

...