Question

美好的一天，在我们开始之前，请原谅问题的无趣性。今天刚拿起HTML。

我正在尝试以下代码：

<form>
    <input type="radio" id="radeng" checked />Male
    <br/>
    <input type="radio" id="radnor" />Female
</form>

现在，按照我理解的方式，我应该可以从第一个选择中选择“男性”或“女性”。

问题是，我可以选择“男性”和“女性”。

这有点奇怪，有点违背我想要实现的目标。

有人可以发现我的错误吗？

Answer 1

17 Forms / 17.2.1 Control types

单选按钮就像复选框一样，只有当多个共享相同的控件名称时，它们是互斥的：当一个按钮被“打开”时，所有其他具有相同名称的按钮都会被“关闭”。

因此，如果您希望无线电元素互斥，则需要为它们提供相同的name属性。在这种情况下，我给它们两个值gender。

为了便于使用，我还建议使用label元素包装文本节点，其中for属性与无线电元素id匹配。这样，您可以通过单击文本（标签）来切换无线电。

<form>
  <label for="radeng">Male</label>
  <input type="radio" name="gender" id="radeng" checked />

  <label for="radnor">Female</label>
  <input type="radio" name="gender" id="radnor" />
</form>

Answer 2

您需要提供具有相同值的name属性，并且只选择一个属性。此外，您应使用<label>标记来指定复选框的名称。

让我们有一些干净的标记：

<ul>
    <li>
        <label for="radeng">Male</label>
        <input type="radio" id="radeng" name="gender" checked />
    </li>
    <li>
        <label for="radnor">Female</label>
        <input type="radio" id="radnor" name="gender" />
    </li>
</ul>

Demo

因此，为name属性组指定相同的单选按钮组。

Answer 3

为两个单选按钮指定相同的名称，如下所示：

<form>
            <input type="radio" name="gender" id="radeng" checked />Male
<br/>
            <input type="radio" name="gender" id="radnor" />Female
</form>

输入类型=收音机，可以选择多个答案吗？

3 个答案: