JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法-js教程-PHP中文网

JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法

看不見的法師

发布： 2025-11-14 21:58:34

原创

466人浏览过

通过原生JavaScript可实现复选框全选、反选与状态同步：1. 用checkAll控制所有item类复选框的选中状态；2. 通过循环遍历将每个item的checked属性取反实现反选；3. 监听每个子项的change事件，判断是否全部选中以同步“全选”状态。

javascript如何实现全选反选_javascript复选框全选反选功能代码实现方法

实现复选框的全选和反选功能是前端开发中常见的需求，JavaScript 提供了简单有效的方式来操作 DOM 元素完成这一功能。下面介绍如何通过原生 JavaScript 实现复选框的全选与反选。

1. HTML 结构准备

首先需要一个“全选”主复选框和多个子复选框：

<input type="checkbox" id="checkAll"> <label>全选</label><br>
<input type="checkbox" class="item" value="1"> 选项1<br>
<input type="checkbox" class="item" value="2"> 选项2<br>
<input type="checkbox" class="item" value="3"> 选项3<br>
<input type="checkbox" class="item" value="4"> 选项4<br>

登录后复制

2. 全选功能实现

监听“全选”复选框的点击事件，将其状态同步给所有子复选框：

document.getElementById('checkAll').onclick = function() {
    const items = document.getElementsByClassName('item');
    for (let i = 0; i < items.length; i++) {
        items[i].checked = this.checked;
    }
};

登录后复制

说明：当“全选”被勾中时，所有 class 为 item 的复选框都被设为选中；取消勾选则全部取消。

立即学习“Java免费学习笔记（深入）”；

3. 反选功能实现

添加一个“反选”按钮，点击时将每个子复选框的状态取反：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

document.getElementById('reverseBtn').onclick = function() {
    const items = document.getElementsByClassName('item');
    for (let i = 0; i < items.length; i++) {
        items[i].checked = !items[i].checked;
    }
};

登录后复制

如果想在没有额外按钮的情况下实现反选，也可以绑定在某个快捷键或双击事件上。

4. 智能全选状态同步（可选增强）

当用户手动选择所有子项时，自动勾中“全选”框；当任意一个子项取消时，取消“全选”状态：

const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
    items[i].onchange = function() {
        const checkAll = document.getElementById('checkAll');
        let allChecked = true;
        for (let j = 0; j < items.length; j++) {
            if (!items[j].checked) {
                allChecked = false;
                break;
            }
        }
        checkAll.checked = allChecked;
    };
}

登录后复制

这样可以提升用户体验，让“全选”框状态更准确地反映子项选择情况。

基本上就这些。通过简单的 DOM 操作和事件监听，就能轻松实现复选框的全选、反选及状态同步功能，不复杂但容易忽略细节。实际项目中建议封装成函数以便复用。

以上就是JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法的详细内容，更多请关注php中文网其它相关文章！