如何在jQuery点击Checkbox时隐藏其他已追加的<div>元素——多选Checkbox提示重复显示问题排查与解决

首先，你的核心问题在于每次点击Checkbox时都直接往容器里追加新的提示div，没有先清除之前生成的旧提示，导致旧的提示一直残留显示。另外你的switch判断逻辑也存在问题——groupId是一个数组，直接用groupId == 1这种比较方式永远不会成立，这也是你部分提示可能没正常触发的原因。

下面是修改后的完整代码，我会一步步说明关键改动：

关键改动说明 #

• 每次处理Checkbox状态前，先清空.btn-container里的所有.btn-list元素，从根源解决旧提示残留的问题
• 修正switch的判断逻辑：因为groupId是数组，要改用数组方法检查是否包含特定值
• 优化代码冗余：合并重复获取选中Checkbox的逻辑，减少不必要的重复计算

$(document).ready(function(){
    $('input[name="id[]"]').click(function() {
        // 合并重复逻辑：一次性获取所有选中的Checkbox
        const checkedBoxes = $('input[name="id[]"]:checked').toArray();
        
        // 提取value数组（对应你原来的url变量）
        const selectedValues = checkedBoxes.map(val => val.value);
        // 提取id数组（对应你原来的groupId变量，转成数字类型方便计算）
        const groupIds = checkedBoxes.map(val => parseInt(val.id));
        // 计算total：用reduce简化求和逻辑
        const total = groupIds.reduce((acc, id) => acc + id, 0);

        // 核心步骤：清空之前的所有提示，避免旧内容残留
        $('.btn-container .btn-list').remove();

        // 修正switch判断逻辑，针对数组和total做正确判断
        switch (true) {
            // 判断groupIds数组中是否包含1
            case groupIds.includes(1):
                no_command_alert();
                break;
            // 判断total是否等于1
            case total === 1:
                multiple_alert();
                break;
            // 其他情况什么都不做
            default:
                break;
        }

        function multiple_alert(){
            $('.btn-container').append(
                '<div class="btn-list row justify-content-center" style="display: none">'
                +'<div class="col-12 text-center">'
                +'<div class="alert alert-primary text-center">'
                +'<h5>warning</h5>'
                +'<hr>'
                +'<p>different is true</p>'
                +'</div>'
                +'</div>'
                +'</div>'
            );
            $('.btn-list').fadeIn('fast');
        }

        function no_command_alert(){
            $('.btn-container').append(
                '<div class="btn-list row justify-content-center " style="display: none">'
                +'<div class="col-12 text-center">'
                +'<div class="alert alert-primary text-center">'
                +'<h5>warning</h5>'
                +'<hr>'
                +'<p>you cant change this</p>'
                +'</div>'
                +'</div>'
                +'</div>'
            );
            $('.btn-list').fadeIn('fast');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <input type="checkbox" id="0" name="id[]" value="1">
    <input type="checkbox" id="0" name="id[]" value="2">
    <input type="checkbox" id="1" name="id[]" value="4">
</form>
<div class="btn-container justify-content-center "></div>

额外提示 #

1. 注意HTML里的Checkbox ID最好不要重复（你现在有两个id="0"的Checkbox），虽然浏览器允许，但不符合HTML规范，可能导致后续JS或CSS选择器出现意外问题，建议改成唯一ID。
2. 如果后续需要同时显示多个提示（比如选中多个符合不同条件的Checkbox），可以不用清空容器，而是给每个提示加唯一标识，再根据当前选中状态判断显示/隐藏，但从你的需求描述来看，清空重写是最直接简单的解决方案。

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