Html 单击文本以选择相应的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7863251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clicking the text to select corresponding radio button
提问by Abundnce10
I'm creating a quiz web application using PHP. Each question is comprised of a separate <label>and has 4 possible choices, using radio buttonsto allow the user to select his/her answer. The current HTML for a single question looks like:
我正在使用 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>
I would like the user to have the option of clicking on the text associated with radio button.Right now, the user can only click on the radio button itself - which I find to be a quite cumbersome task.
我希望用户可以选择单击与单选按钮关联的文本。现在，用户只能单击单选按钮本身 - 我发现这是一项非常繁琐的任务。
I read Unable to select a particular radio button choice by clicking on the choice textand the suggestion points toward making the forand idattributes of the tags match. I have done this and it still doesn't work.
我读到无法通过单击选项文本来选择特定的单选按钮选项，并且建议指向使标签的for和id属性匹配。我已经这样做了，但它仍然不起作用。
My question is: I'd like to be able to click the text of an <input type="radio">object, as opposed to only being able to select the radio button itself.I know I've read about this before but can't seem to find any solution to my problem. Any help or suggestions are much appreciated!
我的问题是：我希望能够单击<input type="radio">对象的文本，而不是只能选择单选按钮本身。我知道我以前读过这个，但似乎无法找到任何解决我的问题的方法。非常感谢任何帮助或建议！
回答by Nathan
In your code, you've got a label on the form itself. You want to put labels on each individual radio group, as shown below.
在您的代码中，表单本身有一个标签。您想在每个单独的无线电组上放置标签，如下所示。
<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>You should keep in mind that two elements should never have the same ID. The nameattribute is used so that the radio buttons function as a group and only allow a single selection at a time.
您应该记住，两个元素永远不应具有相同的 ID。使用该name属性使单选按钮作为一个组起作用并且一次只允许一个选择。
回答by user21820
There seems to be a little unclickable space between the radio button and the label if done according to Nathan's answer. Here is how to make them join seamlessly (see this article):
如果根据Nathan的回答完成，单选按钮和标签之间似乎有一些无法点击的空间。以下是让它们无缝连接的方法（请参阅本文）：
<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>
回答by endyourif
The label tag should be around each answer, e.g. around Abe, Andrew, etc... and it needs to be unique for each of them.
标签标签应该围绕每个答案，例如围绕 Abe、Andrew 等……并且每个答案都必须是唯一的。
回答by Neo
Nesting the input tag within the label tag ensures the label appears right next to the radio button. With the earlier approaches suggested, you can put the label tag anywhere within the html file and it will select the associated radio button when clicked. Check this out:
将输入标签嵌套在标签标签内可确保标签显示在单选按钮旁边。使用之前建议的方法，您可以将标签标签放在 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>Doing it this way instead eliminates this flaw:
这样做反而消除了这个缺陷：
<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>回答by Gymus
I have been doing this for years, but neither of these work for me, using variables.
我多年来一直这样做，但使用变量，这些都不适合我。
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";
and here is the source:
这是来源：
<input type='radio' name='student' id='986875' value='986875'>
<label for='986875'>John</label> Brown<br />
回答by JuicY_Burrito
You can do it like this
你可以这样做
<label for="1">hi</label>
<input type="radio" id="1" />
So if you click on the text or label it selects the radio button. But if you do this...
因此，如果您单击文本或标签，它会选择单选按钮。但是如果你这样做...
<label for="1">//</label>
and you add this to what the code I wrote just before this then if you click on the 2nd label then it will also select the radio.
并将其添加到我之前编写的代码中，然后如果您单击第二个标签，它也会选择收音机。
