html - 两个复选框不会同时打开

Question

我怎样做？例如我有两个复选框，这两个框都不能工作。CSS 等等，但是我该怎么做呢？

<input id="val1" type="checkbox" />
<label for="val1">Value1</label>
<input id="val2" type="checkbox" />
<label for="val2">Value2</label>

谢谢你的兴趣。干得好。。

Answer 1

听起来您想要两个无法同时选择的控件。在 HTML 中，这将是一个单选按钮，而不是一个复选框。您将使用相同的name属性使它们成为功能组：

<input id="val1" type="radio" name="foo" />
<label for="val1">Value1</label>
<input id="val2" type="radio" name="foo" />
<label for="val2">Value2</label>

但是请注意，一旦用户选择了单选按钮，单选按钮集就不能重置为“无选择”状态，除非通过重置按钮（这实际上是一个破坏按钮，几乎任何时候都应该避免成本）或通过脚本。

因此，包含一个没有选择的虚拟条目通常很有用：

<input id="val0" type="radio" name="foo" checked="checked" />
<label for="val0">Not answered yet</label>
<input id="val1" type="radio" name="foo" />
<label for="val1">Value1</label>
<input id="val2" type="radio" name="foo" />
<label for="val2">Value2</label>