checkbox用法菜鸟教程：checkbox用法菜鸟教程，从入门到精通

来源：网络作者：日期：2025-11-04 16:55:59

什么是checkbox？

Checkbox（复选框）是一种允许用户从多个选项中选择一个或多个选项的输入控件，与单选按钮（radio button）不同,checkbox允许多选。

基础用法

checkbox的基本语法如下：

<input type="checkbox" id="option1" name="option1">
<label for="option1">选项一</label>

type="checkbox"：指定输入类型为复选框。
id 和 name：用于标识该复选框，多个复选框可以使用相同的name，但id必须唯一。
label：为复选框添加标签，for属性与id对应,提升用户体验。

默认选中与禁用状态

默认选中

通过checked属性设置复选框默认选中：

checkbox用法菜鸟教程：checkbox用法菜鸟教程，从入门到精通

<input type="checkbox" id="option2" name="option2" checked>
<label for="option2">默认选中的选项</label>

禁用复选框

使用disabled属性禁用复选框：

<input type="checkbox" id="option3" name="option3" disabled>
<label for="option3">不可用的选项</label>

JavaScript操作checkbox

获取选中状态

const checkbox = document.getElementById("myCheckbox");
if (checkbox.checked) {
  console.log("复选框被选中");
} else {
  console.log("复选框未选中");
}

动态设置选中状态

// 设置选中
checkbox.checked = true;
// 取消选中
checkbox.checked = false;

常见问题与解决方案

如何限制只能选择一个？

虽然checkbox本身允许多选,但可以通过JavaScript实现互斥逻辑：

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    checkboxes.forEach(cb => {
      if (cb !== this) cb.checked = false;
    });
  });
});

如何添加自定义样式？

使用CSS可以完全自定义checkbox的外观：

/* 隐藏默认样式 */
.checkbox-container input {
  display: none;
}
/* 自定义样式 */
.checkbox-container {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.checkbox-container input:checked + .checkmark {
  background: #2196F3;
}
/* 自定义复选框样式 */
.checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
}