js 实现checkbox

2026-03-14 06:39:44JavaScript

使用 HTML 和 JavaScript 实现 Checkbox

HTML 中的 checkbox 可以通过 <input type="checkbox"> 标签实现，结合 JavaScript 可以动态控制其行为和状态。

<input type="checkbox" id="myCheckbox"> 选项文本

获取 Checkbox 的状态

通过 JavaScript 可以检查 checkbox 是否被选中：

const checkbox = document.getElementById('myCheckbox');
console.log(checkbox.checked); // 返回 true 或 false

动态设置 Checkbox 状态

可以通过 JavaScript 动态修改 checkbox 的选中状态：

const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true; // 选中
checkbox.checked = false; // 取消选中

监听 Checkbox 变化事件

通过 addEventListener 可以监听 checkbox 的状态变化：

const checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('change', function() {
    if (this.checked) {
        console.log('Checkbox 被选中');
    } else {
        console.log('Checkbox 取消选中');
    }
});

全选和取消全选功能

结合多个 checkbox 可以实现全选功能：

<input type="checkbox" id="selectAll"> 全选
<input type="checkbox" class="item"> 选项1
<input type="checkbox" class="item"> 选项2
<input type="checkbox" class="item"> 选项3

const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

selectAll.addEventListener('change', function() {
    items.forEach(item => {
        item.checked = this.checked;
    });
});

动态生成 Checkbox

可以通过 JavaScript 动态生成 checkbox 并插入到 DOM 中：

const container = document.getElementById('container');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'dynamicCheckbox';

const label = document.createElement('label');
label.htmlFor = 'dynamicCheckbox';
label.textContent = '动态选项';

container.appendChild(checkbox);
container.appendChild(label);

表单提交时获取 Checkbox 值

在表单提交时，可以通过 FormData 或直接获取 checkbox 的值：

<form id="myForm">
    <input type="checkbox" name="option" value="1"> 选项1
    <input type="checkbox" name="option" value="2"> 选项2
    <button type="submit">提交</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const selectedOptions = formData.getAll('option');
    console.log(selectedOptions); // 返回选中的值数组
});

使用 jQuery 简化操作

如果项目中引入了 jQuery，可以简化 checkbox 的操作：

// 获取状态
$('#myCheckbox').prop('checked');

// 设置状态
$('#myCheckbox').prop('checked', true);

// 监听变化
$('#myCheckbox').change(function() {
    if ($(this).is(':checked')) {
        console.log('选中');
    } else {
        console.log('取消选中');
    }
});

样式美化

可以通过 CSS 美化 checkbox 的样式，或使用自定义样式库如 Bootstrap：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="bootstrapCheckbox">
    <label class="form-check-label" for="bootstrapCheckbox">Bootstrap 样式</label>
</div>

自定义 Checkbox 样式

通过隐藏原生 checkbox 并使用伪元素实现自定义样式：

js 实现checkbox

<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    自定义样式
</label>

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 3px;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}