Javascript 如何避免覆盖多个if-else块？

当我点击e复选框时，另一个字段将出现，而一些字段将消失。为此，我编写了一个带有简单if-else逻辑的函数。但对于多个if-else逻辑，某些块会覆盖另一个块。我使用return，但仍然不工作。这是我的密码

   function checkCheckbox() {
        if ($('#irregular').is(":checked")) {
            $('#daysOfInactivity').show();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            $("#isNumOfTrans").hide();
            return;
        } else {
            $('#daysOfInactivity').hide();
            $("#targetPointDiv").show();
            $("#targetTransactionDiv").show();
            $("#fixedTimeDiv").show();
            $("#isNumOfTrans").show();
            return;
        }
        if ($('#isNumOfTrans').is(":checked")) {
            $('#numOfTrans').show();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            return;
        } else {
            $('#numOfTrans').hide();
            $("#targetPointDiv").hide();
            $("#targetTransactionDiv").hide();
            $("#fixedTimeDiv").hide();
            return;
        }

---

}

以下代码段从未执行：

if ($('#isNumOfTrans').is(":checked")) {
        $('#numOfTrans').show();
        $("#targetPointDiv").hide();
        $("#targetTransactionDiv").hide();
        $("#fixedTimeDiv").hide();
        return;
    } else {
        $('#numOfTrans').hide();
        $("#targetPointDiv").hide();
        $("#targetTransactionDiv").hide();
        $("#fixedTimeDiv").hide();
        return;
    }

这是因为第一个if块有一个return语句，永远不允许代码到达上面的块。这极有可能导致异常行为！考虑从IF块中分离逻辑，因为存在重叠的条件！ @你可以试试这样的东西

$(document).ready(function(){
    $('#irregular').change(function(){
        if ($(this).is(":checked")) {
           $('#daysOfInactivity').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide();

        } else {
           $('#daysOfInactivity').hide();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show();
        }
    });

    $('#isNumOfTrans').change(function(){
        if ($(this).is(":checked")) {
           $('#numOfTrans').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();
        } else 
           $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();

    });
}

或以这种方式—

function checkCheckBox(){
   $('#irregular').change(function(){
        if ($(this).is(":checked")) {
           $('#daysOfInactivity').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide();

        } else {
           $('#daysOfInactivity').hide();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show();
        }
    });

    $('#isNumOfTrans').change(function(){
        if ($(this).is(":checked")) {
           $('#numOfTrans').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();
        } else 
           $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();

    });
}
$(document).ready(checkCheckBox);

function checkCheckBox(){
   $('#irregular').change(function(){
           $('#daysOfInactivity')[$(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans')[!($(this).is(":checked"))?'show':'hide'];
    });

    $('#isNumOfTrans').change(function(){
           $('#numOfTrans')[(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();  
    });
}
$(document).ready(checkCheckBox);

或者这样-

function checkCheckBox(){
   $('#irregular').change(function(){
        if ($(this).is(":checked")) {
           $('#daysOfInactivity').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide();

        } else {
           $('#daysOfInactivity').hide();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show();
        }
    });

    $('#isNumOfTrans').change(function(){
        if ($(this).is(":checked")) {
           $('#numOfTrans').show();
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();
        } else 
           $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();

    });
}
$(document).ready(checkCheckBox);

function checkCheckBox(){
   $('#irregular').change(function(){
           $('#daysOfInactivity')[$(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans')[!($(this).is(":checked"))?'show':'hide'];
    });

    $('#isNumOfTrans').change(function(){
           $('#numOfTrans')[(this).is(":checked")?'show':'hide'];
           $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide();  
    });
}
$(document).ready(checkCheckBox);

我认为这将帮助您删除元素的返回和切换可见性。

---

我强烈推荐@APL方法。

return应该修复它，到底发生了什么，你能举个例子吗？第二个

if

将永远不会执行，因为

返回if

和

else

块中的code>语句。当我不使用return语句时，第一个if-else被第二个if-else块覆盖。我试着返回，但不工作。有没有其他最简单的方法可以做到这一点？