如何使单选按钮文本也可点击？

Question

我有一个单选按钮（以及在这个之后的一些其他按钮）：

<input type="radio" name="group1" value="Milk"> Milk<br>

但是如果我想要激活单选按钮，我必须点击它，点击位于按钮右侧的单词“Milk”并不能激活它。我该怎么做？到目前为止，我找到的所有关于单选按钮的示例都存在相同的问题。

- Faito

---

可能是具有可点击标签的单选按钮组的重复问题。 - isherwood

可能是重复的问题：如何将标签与单选按钮关联起来。 - Mansfield

Answer 1

在这里，你想要使用标签标记。

类似于：

            <label>
                <input type="radio" name="group1" value="Milk">
                Milk
            </label><br/>

标签告诉浏览器，包含在其中的所有内容应该被视为一个元素（就文本而言。它们不是

）

看这个例子：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label

- Nathan Lafferty

---

这个可以工作；然而，链接显示的是一个像@Mansfield回答的示例。 - Even Mien

太简单了！而且它极大地提高了网站的易用性，并使移动设备上的操作更加容易。 - redwards510

Answer 2

如果您使用label标签为单选按钮设置ID，则应该能够通过单击标签来选择单选按钮。

<input type="radio" name="group1" value="Milk" id="rad1">
<label for="rad1">Milk</label>

这适用于xhtml 1.0 strict：

http://jsfiddle.net/tvFgU/1/

- Mansfield

---

我明白了，"for"属性在严格的xhtml 1.0中是有效的吗？ - Faito

Answer 3

对于React JSX

<input type="radio" name="group" value="happy" id="rad1">
<label htmlFor="rad1">YES</label>

<input type="radio" name="group" value="sad" id="rad2">
<label htmlFor="rad2">NO</label>

这里的Name属性对于两个单选按钮来说是相同的。

- Anupam Maurya

Answer 4

对已接受的答案进行补充。如果您的单选按钮是列表中的一个项目，为了提供最佳用户体验，即使用户点击其前面的空白区域，您也应该选择单选按钮。

为此，在您的 CSS 文件中，设置 display: block 以针对您的 label，与下面的示例相同。这将强制您的 label 填充整个可用区域。

HTML 文件：

<li><label><input type="radio" value="eng">English</label></li>

CSS文件：

label {
    display: block;
}

这样做，用户可以点击您文本前面的空白区域，并且单选按钮仍然会被选中。

- Mostafa Arian Nejad