当前位置：首页 > JavaScript

js 实现checkbox

2026-04-06 00:42:44JavaScript

实现 Checkbox 的基本方法

使用 HTML 和 JavaScript 创建一个简单的 Checkbox 并控制其状态。

HTML 结构

<input type="checkbox" id="myCheckbox"> 
<label for="myCheckbox">选择此项</label>

JavaScript 控制

const checkbox = document.getElementById('myCheckbox');

// 获取 Checkbox 状态
console.log(checkbox.checked); // 返回 true 或 false

// 设置 Checkbox 状态
checkbox.checked = true; // 勾选
checkbox.checked = false; // 取消勾选

// 监听 Checkbox 变化事件
checkbox.addEventListener('change', function() {
    if (this.checked) {
        console.log('Checkbox 被选中');
    } else {
        console.log('Checkbox 被取消选中');
    }
});

动态创建 Checkbox

通过 JavaScript 动态生成 Checkbox 并添加到页面中。

// 创建 Checkbox 元素
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = 'dynamicCheckbox';

// 创建 Label 元素
const label = document.createElement('label');
label.htmlFor = 'dynamicCheckbox';
label.textContent = '动态创建的 Checkbox';

// 添加到 DOM
document.body.appendChild(checkbox);
document.body.appendChild(label);

全选/全不选功能

实现一组 Checkbox 的全选或全不选功能。

HTML 结构

js 实现checkbox

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

JavaScript 控制

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

// 全选/全不选功能
selectAll.addEventListener('change', function() {
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// 单个 Checkbox 变化时更新全选状态
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        selectAll.checked = [...checkboxes].every(c => c.checked);
    });
});

样式自定义

通过 CSS 自定义 Checkbox 的外观。

HTML 结构

js 实现checkbox

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

CSS 样式

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    user-select: none;
}

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

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

.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: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

表单提交处理

在表单提交时获取所有被选中的 Checkbox 值。

HTML 结构

<form id="myForm">
    <input type="checkbox" name="interests" value="sports"> 体育
    <input type="checkbox" name="interests" value="music"> 音乐
    <input type="checkbox" name="interests" value="reading"> 阅读
    <button type="submit">提交</button>
</form>

JavaScript 处理

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const selected = [];
    document.querySelectorAll('input[name="interests"]:checked').forEach(checkbox => {
        selected.push(checkbox.value);
    });

    console.log('选中的兴趣:', selected);
    // 这里可以添加表单提交逻辑
});