显示和隐藏一个DIV使用复选框

Question

我的要求是一样，如果我选择单一的因素，我可以能够选择只有一种类型的认证模式。如果选择了任何一种认证模式，则会显示相应的div，在多种因素中，我可以选择两种认证模式，但是如果我选择两种认证模式，则只显示第一个选中的div div，而第二个选中的div不显示get的显示。如何在选择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

使用此。如果你，如果只执行一个语句中使用其他人，所以你应该去，如果为每一个复选框

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/