使用复选框显示和隐藏Div

Question

我的要求是，如果我选择单因素，我只能选择一种身份验证模式。如果选择任何一种验证模式，将显示相应的div。在多因素中，我可以选择两种验证模式，但如果我选择两种验证模式，则仅显示第一个已检查的div，但第二次检查div没有显示出来。选择2个选项时如何显示两个div。

我试过了：

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } else if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } else if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } else if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } else if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

先谢谢。

Answer 1

使用此..如果您只使用一个语句，则使用else，因此您应该为每个复选框选择if

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } 
    if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } 
    if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } 
    if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } 
    if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

Answer 2

使用一点预见可以为您节省相当多的代码。在你的div上放一个类，你可以点击jQuery这样的复选框值，如下所示：

<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>



$('input:checkbox').on('click',function(){
    if($(this).is(':checked'))
    {
        $('.'+$(this).val()).show();
    } else {
        $('.'+$(this).val()).hide();
    }

});

演示：http://jsfiddle.net/calder12/jRZBX/1/