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

【问题标题】：Clicking the text to select corresponding radio button单击文本以选择相应的单选按钮
【发布时间】：2011-12-13 09:03:08
【问题描述】：

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

【问题讨论】：

标签： html css forms input radio-button

【解决方案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 属性以便单选按钮作为一个组起作用，并且一次只允许一个选择。

【讨论】：

非常简单。重新发现几乎隐藏的标签功能时会喜欢它

【解决方案2】：

标签标签应围绕每个答案，例如围绕着 Abe、Andrew 等......并且对于他们每个人来说都必须是独一无二的。

【讨论】：

【解决方案3】：

如果按照 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>

【讨论】：

我更喜欢这个答案。但是你确定你甚至需要这种方法的“for”属性吗？
@Piddu：我认为你是对的，所以我更新了我的答案。谢谢！
另一个避免单选按钮和标签之间多余空格的选项是根本不把它放在那里<input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>（标签之间没有空格或换行符）
我刚刚在 chrome 和 firefox 中测试了我的方式，发现它通过删除空格字符将不可点击的空间从 7 像素减少到 3 像素。见why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements。剩下的三个像素是单选按钮 margin: 3px 3px 0 5px; 上的默认右边距（在 Firefox 中更明显，因为默认情况下有悬停效果），可以使用 CSS 通过删除边距并用填充替换它来修复。
@AryeDovEidelman：我明白了，感谢您的调查！尽管为简单起见，我会坚持将整个内容都包含在标签中。 =)

【解决方案4】：

你可以这样做

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

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

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

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

【讨论】：

【解决方案5】：

在标签标签中嵌套输入标签可确保标签显示在单选按钮旁边。使用建议的较早方法，您可以将标签标记放在 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>

【讨论】：

我认为您的答案中唯一缺少的一点是您可以单击标签的原因是因为有一个“for”属性将输入和标签链接在一起。否则很好的答案。

【解决方案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 />

【讨论】：