jQuery实现同名复选框状态同步及双组选中状态下div显隐控制问题咨询

问题原因 #

你的代码存在三处核心问题：

1. 显隐判断逻辑完全写反且分支顺序错误：你写的第一个if (ischecked || ischeckedTwo)已经覆盖了「任意一组勾选、两组都勾选」的所有场景，后面的else if永远不会触发，和你「两组都未勾选才隐藏options」的需求完全不符。
2. 存在冗余无效代码：$(" ."+changedName).slideToggle()这行要操作的类名在你的DOM结构里根本不存在，直接删掉即可。
3. 没有处理页面初始加载的状态：你给的checkbox默认是勾选状态，页面加载完成后需要先判断一次状态显示options，否则初始阶段options会一直隐藏。

修正后的完整代码 #

JS代码

$(document).ready(function() {
    // 页面加载完成先判断一次初始状态
    toggleOptions();

    $('.control').change(function() {
        const changedName = $(this).attr('name');
        // 同组复选框状态同步
        $(`input[name=${changedName}]`).prop('checked', this.checked);
        // 切换options显隐
        toggleOptions();
    });

    // 封装显隐判断逻辑复用
    function toggleOptions() {
        const groupOneChecked = $("input[name=changer-one]").is(':checked');
        const groupTwoChecked = $("input[name=changer-two]").is(':checked');
        // 只有两组都未勾选才隐藏，其余情况全部显示
        if (!groupOneChecked && !groupTwoChecked) {
            $(".options").fadeOut(300);
        } else {
            $(".options").fadeIn(300);
        }
    }
});

CSS代码（无需修改）

.options {
    display:none;
}

HTML代码无需调整，和你原有代码保持一致即可。

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