Question

我正在使用PHP创建一个测验Web应用程序。每个问题都由一个单独的<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>

我希望用户可以选择单击与单选按钮关联的文本。现在，用户只能点击单选按钮本身 - 我发现这是一个相当的繁琐的任务。

我看了Unable to select a particular radio button choice by clicking on the choice text，并提出了使标签的for和id属性匹配的建议点。我做了这个，它仍然无法正常工作。

我的问题是：我希望能够点击<input type="radio">对象的文字，而不是只能选择单选按钮本身。我知道我以前读过这个，但似乎无法找到解决我问题的方法。任何帮助或建议都非常感谢！

Answer 1

在您的代码中，您在表单上有一个标签。您希望在每个单独的无线电组上放置标签，如下所示。

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

您应该记住，两个元素永远不应该具有相同的ID。使用name属性，以便单选按钮作为一个组运行，并且一次只允许一个选择。

Answer 2

如果根据 Nathan 的答案完成，单选按钮和标签之间似乎有一点不可忽略的空间。以下是如何使它们无缝连接（请参阅this article）：

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

Answer 3

标签标签应该在每个答案周围，例如在安倍，安德鲁等地周围......它们每个都需要独一无二。

Answer 4

将输入标签嵌套在标签标签内可确保标签出现在单选按钮旁边。使用之前建议的方法，您可以将标签标记放在html文件中的任何位置，并在单击时选择相关的单选按钮。看看这个：

＆＃13;

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

＆＃13;

这样做可以消除这个缺陷：

＆＃13;

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

＆＃13;

Answer 5

你可以这样做

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

因此，如果您单击文本或标签，则会选择单选按钮。但如果你这样做......

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

然后你把它添加到我之前写的代码那么如果你点击第二个标签然后它也会选择收音机。

Answer 6

我已经这样做了多年，但是使用变量对我来说都不起作用。

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

单击文本以选择相应的单选按钮

6 个答案: