HTML checkbox 使用方法和示例大全，包含复选框创建、样式设置和 JavaScript 控制等方面的详细教程

HTML 中的 checkbox（复选框）是一种表单元素，允许用户从多个选项中选择一个或多个。以下是关于 checkbox 的详细使用方法，涵盖创建、样式设置和 JavaScript 控制等方面。

复选框创建

基本的复选框创建

在 HTML 中，创建复选框非常简单，使用 <input> 标签，将 type 属性设置为 "checkbox" 即可。以下是一个基本示例：

<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>

在上述代码中，id 属性用于唯一标识复选框，name 属性用于将复选框分组，value 属性是当表单提交时该复选框的值。<label> 标签用于关联复选框，点击标签也能选中或取消选中复选框。

多个复选框

如果需要多个复选框，可以重复上述步骤，为每个复选框设置不同的 id 和 value：

<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>
<input type="checkbox" id="option2" name="options" value="option2">
<label for="option2">选项 2</label>
<input type="checkbox" id="option3" name="options" value="option3">
<label for="option3">选项 3</label>

这里所有复选框的 name 属性相同，它们属于同一组，当表单提交时，会将选中的复选框的值一起提交。

默认选中的复选框

可以使用 checked 属性来设置复选框默认选中：

<input type="checkbox" id="option1" name="options" value="option1" checked>
<label for="option1">选项 1</label>

样式设置

基本样式设置

可以使用 CSS 来设置复选框的样式。以下是一个简单的示例，改变复选框的大小和颜色：

<style>
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent - color: blue;
}
</style>
<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>

在上述代码中，使用 input[type="checkbox"] 选择器选中所有复选框，设置宽度、高度和 accent - color（选中时的颜色）。

自定义复选框样式

可以通过隐藏原生复选框，使用 CSS 创建自定义的复选框样式：

<style>
/ 隐藏原生复选框 /
input[type="checkbox"] {
    display: none;
}
/ 自定义复选框样式 /
input[type="checkbox"] + label::before {
    content: '';
    display: inline - block;
    width: 18px;
    height: 18px;
    border: 2px solid ccc;
    margin - right: 5px;
    vertical - align: middle;
}
/ 选中状态样式 /
input[type="checkbox"]:checked + label::before {
    background - color: blue;
    border - color: blue;
    content: '✓';
    color: white;
    text - align: center;
}
</style>
<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>

这里通过隐藏原生复选框，使用伪元素 ::before 创建一个自定义的复选框样式，当复选框被选中时，改变其背景颜色和显示内容。

JavaScript 控制

获取复选框的选中状态

可以使用 JavaScript 获取复选框的选中状态，以下是一个示例：

<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>
<button onclick="checkStatus()">检查状态</button>
<script>
function checkStatus() {
    var checkbox = document.getElementById('option1');
    if (checkbox.checked) {
        alert('复选框已选中');
    } else {
        alert('复选框未选中');
    }
}
</script>

在上述代码中，通过 getElementById 方法获取复选框元素，然后检查其 checked 属性来判断是否选中。

选中或取消选中复选框

可以使用 JavaScript 动态地选中或取消选中复选框：

<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">选项 1</label>
<button onclick="selectCheckbox()">选中复选框</button>
<button onclick="deselectCheckbox()">取消选中复选框</button>
<script>
function selectCheckbox() {
    var checkbox = document.getElementById('option1');
    checkbox.checked = true;
}
function deselectCheckbox() {
    var checkbox = document.getElementById('option1');
    checkbox.checked = false;
}
</script>

通过设置复选框的 checked 属性为 true 或 false 来选中或取消选中复选框。

全选和反选功能

以下是一个实现全选和反选功能的示例：

<input type="checkbox" id="checkAll">全选
<input type="checkbox" class="option" name="options" value="option1">选项 1
<input type="checkbox" class="option" name="options" value="option2">选项 2
<input type="checkbox" class="option" name="options" value="option3">选项 3
<button onclick="selectAll()">全选</button>
<button onclick="invertSelection()">反选</button>
<script>
function selectAll() {
    var checkboxes = document.querySelectorAll('.option');
    var checkAll = document.getElementById('checkAll');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = checkAll.checked;
    });
}
function invertSelection() {
    var checkboxes = document.querySelectorAll('.option');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked =!checkbox.checked;
    });
}
</script>

在上述代码中，通过 querySelectorAll 方法获取所有复选框元素，然后遍历这些元素，根据需要设置其 checked 属性。