修复Checkbox与Select All按钮联动显示/隐藏Delete Button的逻辑问题

问题拆解 #

现有代码没法同时满足两个需求，核心问题有两个：

1. 全选按钮逻辑错误——误操作了删除按钮（.settings是删除按钮的class），而非目标复选框
2. 单个复选框点击和全选按钮点击的逻辑独立，全选后无法同步更新删除按钮的显示状态

修正后的完整代码 #

先调整HTML，给所有需要操作的复选框添加统一class，方便批量选择：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show / Hide a Button onclick</title>
</head>
<body>
    <div class="col-md-9 dl-dir-block">
        <div class="card">
            <div class="card-body">
                <button class="select-all btn btn-primary">Select All</button>
                <!-- 给复选框添加统一class: item-checkbox -->
                <input type="checkbox" id="selectCheckbox" class="btn btn-primary item-checkbox">
                <!-- 可添加更多复选框测试全选效果 -->
                <input type="checkbox" class="btn btn-primary item-checkbox">
                <input type="checkbox" class="btn btn-primary item-checkbox">
                <input type="submit" id="actions" class="btn btn-primary settings" value="Delete" hidden>
            </div>
        </div>
    </div>
</body>
</html>

然后是JavaScript部分，抽离公共判断逻辑复用：

// 获取目标元素
const checkboxes = $(".item-checkbox");
const deleteBtn = $("#actions");

// 封装核心逻辑：根据复选框勾选状态控制删除按钮显示/隐藏
function updateDeleteBtnStatus() {
    const hasCheckedBox = checkboxes.is(":checked");
    deleteBtn.attr("hidden", !hasCheckedBox);
}

// 单个复选框点击时触发状态更新
checkboxes.click(updateDeleteBtnStatus);

// 全选按钮逻辑
let isAllSelected = false;
$('.select-all').on('click', function () {
    isAllSelected = !isAllSelected;
    // 批量设置所有复选框的勾选状态
    checkboxes.prop('checked', isAllSelected);
    // 同步更新删除按钮状态
    updateDeleteBtnStatus();
});

关键改进点 #

• 统一选择器：给复选框添加item-checkbox类，避免选择错误元素，批量操作更可靠
• 复用逻辑：将判断按钮显示/隐藏的代码封装为独立函数，确保两种操作场景下状态一致，避免重复代码
• 修正全选逻辑：正确操作复选框而非删除按钮，操作完成后立即同步删除按钮状态

内容的提问来源于stack exchange，提问作者karthik