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>