HTML复选框只能选一个：如何实现单选效果

在HTML表单中，复选框是一种非常实用的控件，可以允许用户选择多个选项。但是有时候我们需要实现单选的效果，即用户只能选择一个选项。本文将介绍如何实现HTML复选框只能选一个的效果。

使用单选框

实现HTML复选框只能选一个的最简单方法是使用单选框。单选框是一种类似于复选框的控件，但是用户只能选择其中的一个选项。以下是一个使用单选框实现HTML复选框只能选一个的示例代码：

<form>
  <input type="radio" name="option" value="option1">Option 1<br>
  <input type="radio" name="option" value="option2">Option 2<br>
  <input type="radio" name="option" value="option3">Option 3
</form>

在上面的代码中，我们使用了三个单选框来代替三个复选框。这些单选框都有相同的name属性，这意味着它们属于同一组，用户只能选择其中的一个选项。

使用JavaScript

如果你不想使用单选框，也可以使用JavaScript来实现HTML复选框只能选一个的效果。以下是一个使用JavaScript实现HTML复选框只能选一个的示例代码：

<form>
  <input type="checkbox" name="option" value="option1" onclick="check(this)">Option 1<br>
  <input type="checkbox" name="option" value="option2" onclick="check(this)">Option 2<br>
  <input type="checkbox" name="option" value="option3" onclick="check(this)">Option 3
</form>

<script>
function check(checkbox) {
  var checkboxes = document.getElementsByName("option");
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] != checkbox) {
      checkboxes[i].checked = false;
    }
  }
}
</script>

在上面的代码中，我们为每个复选框添加了一个onclick事件处理程序。当用户单击复选框时，事件处理程序会遍历所有相同name属性的复选框，并将除当前复选框之外的所有复选框的checked属性设置为false，这样就实现了HTML复选框只能选一个的效果。

常见问题

1. 如何在使用单选框时设置默认选项？

可以通过将单选框的checked属性设置为true来设置默认选项。以下是一个示例代码：

<form>
  <input type="radio" name="option" value="option1" checked>Option 1<br>
  <input type="radio" name="option" value="option2">Option 2<br>
  <input type="radio" name="option" value="option3">Option 3
</form>

2. 如何在使用JavaScript时避免冲突？

为了避免JavaScript与其他代码发生冲突，可以使用命名空间来封装JavaScript代码。以下是一个示例代码：

<form>
  <input type="checkbox" name="option" value="option1" onclick="myNamespace.check(this)">Option 1<br>
  <input type="checkbox" name="option" value="option2" onclick="myNamespace.check(this)">Option 2<br>
  <input type="checkbox" name="option" value="option3" onclick="myNamespace.check(this)">Option 3
</form>

<script>
var myNamespace = {
  check: function(checkbox) {
    var checkboxes = document.getElementsByName("option");
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] != checkbox) {
        checkboxes[i].checked = false;
      }
    }
  }
};
</script>

在上面的代码中，我们使用了一个名为myNamespace的命名空间来封装JavaScript代码。这样就可以避免与其他代码发生冲突。