顯示和隱藏一個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/