CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh
Vignesh

Reputation: 1518

Display and Hide a Div using check box

Single Factor Auhtentication

My requirement is like, If i am choosing single factor i can able to choose only one type of authentication mode. If any one of the authentication mode is chosen the corresponding div will be showed, In multiple factor I can able to select two authentication mode but if I am selecting two authentication modes only the first checked div get's displayed but the second checked div doesn't get's displayed. How to display both the div's when selecting 2 options.

Multiple Factor

I tried this: 

    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();
    }

Thanks in Advance.

Upvotes: 1

Views: 438

Answers (2)

Rick Calder
Rick Calder

Reputation: 18685

Using a little bit of forethought can save you a fair bit of code. putting a class on your divs that matches the value of the checkbox you can just do an on click in jQuery like this:

<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();
    }

});

Demo: http://jsfiddle.net/calder12/jRZBX/1/

Upvotes: 0

Prasath K
Prasath K

Reputation: 5018

Use this .. If you use else if only one statement is executed so you should go for if for each and every checkbox

    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();
    }

Upvotes: 1

Related Questions