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

我使用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">对象的文本，而不是只能够选择单选按钮本身。我知道我以前阅读过这篇文章，但似乎找不到解决我的问题的方法。任何帮助或建议非常感谢！

来源

2011-10-22 Abundnce10

136

在你的代码中，你在表单本身上有一个标签。您想要在每个单独的电台组上放置标签，如下所示。

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

来源

2011-10-22 23:23:20 Nathan

优越简单。喜欢它当一个几乎隐藏的标签功能被重新发现 – foochow

标签标签应该在每个答案的周围，例如，围绕安倍，安德鲁等等，而且每个人都需要独一无二。

来源

2011-10-22 23:24:04 endyourif

如果根据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>

来源

2015-12-14 12:27:51 user21820

我更喜欢这个答案。但是你确定你甚至需要这种方法的“for”属性吗？ – Piddu

@Piddu：我认为你是对的，所以我已经更新了我的答案。谢谢！ – user21820

你可以像下面这样做

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

所以，如果你点击文本或标签，它选择的单选按钮。但是，如果你这样做......

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

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

来源

2016-10-10 01:19:08

将输入标签嵌套在标签标签内可确保标签显示在单选按钮旁边。使用前面提到的方法，您可以将标签标签放置在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>

来源

2017-10-14 13:52:38 Neo

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

回答

相关问题