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

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>

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

我读到 无法通过单击选择文本来选择特定的单选按钮选项， 建议指向标签的 for 和 id 属性匹配。我已经这样做了，但它仍然不起作用。

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

原文由 Abundnce10 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性用于使单选按钮作为一个组起作用并且一次只允许一个选择。

原文由 Nathan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果根据 内森 的回答完成，单选按钮和标签之间似乎有一点不可点击的空间。以下是让他们无缝加入的方法（请参阅 这篇文章）：

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

原文由 user21820 发布，翻译遵循 CC BY-SA 3.0 许可协议