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

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">对象的文本,而不是只能选择单选按钮本身. 我知道我以前读过这个,但似乎无法找到解决问题的方法.任何帮助或建议都非常感谢!

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

根据内森的回答,单选按钮和标签之间似乎有一点不可忽视的空间.以下是如何使它们无缝连接(请参阅此文章):

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