Html5表单验证复选框

Question

我想只允许一组复选框中的一个复选框，供用户在不使用JavaScript的情况下进行检查。我有以下（非常简单）代码：

<input type="checkbox" class="checkbox_condition" name="checkboxGroupName" id="first" required>
<input type="checkbox" class="checkbox_condition" name="checkboxGroupName" id="first" required>

我想强迫访问者从该组中选择一个复选框。没有JavaScript我怎么能这样做？我很感激任何建议。

Answer 1

将checkbox切换为radio - 单选按钮具有您要查找的内置功能，在css中，您可以使radio button看起来像一个复选框。看到我的小提琴https://jsfiddle.net/pcvwwjoe/2/

<input type="radio" class="checkbox_condition" name="checkboxGroupName" id="first" required>
  <input type="radio" class="checkbox_condition" name="checkboxGroupName" id="first"> 

另外请注意，由于两个单选按钮具有相同的名称，因此您只需要使用一次，因为它们全部组合在一起。