Chaining/unbinding jQuery toggles

Question

I have an application with several hidden divs. When a checkbox is checked, the div is shown with another checkbox to show another hidden div. There are three hidden divs in total and the last div (obviously) does not contain this checkbox.

I am using the following script:

$(function () {
    $("#isApplicant2").click(function () {
        $("#b2").fadeToggle(500);
    });

    $("#isApplicant3").click(function () {
        $("#b3").fadeToggle(500);
    });

    $("#isApplicant4").click(function () {
        $("#b4").fadeToggle(500);
    });
})

HTML

<div class="form-group">
    @Html.Label("Is there another Applicant?", new { @class = "col-md-3" })
    <div class="col-md-2">
        @Html.CheckBox("isApplicant2")
    </div>
</div>

<div id="b2" style="display: none">
    <div> Some Content </div>
</div>

<div class="form-group">
    @Html.Label("Is there another Applicant?", new { @class = "col-md-3" })
    <div class="col-md-2">
        @Html.CheckBox("isApplicant3")
    </div>
</div>

<div id="b3" style="display: none">
    <div> Some Content </div>
</div>

<div class="form-group">
    @Html.Label("Is there another Applicant?", new { @class = "col-md-3" })
    <div class="col-md-2">
        @Html.CheckBox("isApplicant4")
    </div>
</div>

<div id="b4" style="display: none">
    <div> Some Content </div>
</div>

I've got it working with one shortcoming (a major one) that I cannot quite figure out how to cure. If the first div toggle (#isApplicant2) is false, I need to set all others to false as well and the same for each following. So that #isApplicant2 cannot be false yet display other hidden divs.

I have searched high and low but am just getting lost on the concept of .unbind if that is even the right way.

Can you include some HTML. And what element does "all others" refer to? — Mottie, Feb 26 '15 at 02:27
Added HTML. What "all others" means is if #2 is false (hidden) then #3 & 4 must be hidden as well. If #3 is hidden then #4 must be hidden. — New2ASPMVC, Feb 26 '15 at 02:39
None of these id's are showing in your HTML. And when you say 2, 3, 4 are you referring to applicant# or b#? That distinction is not clear. — EternalHour, Feb 26 '15 at 02:52
MVC automatically creates the #Id that matches the checkbox name — New2ASPMVC, Feb 26 '15 at 03:03

score 1 · Accepted Answer · edited May 23 '17 at 12:28

Something like this:

jsFiddle Demo

$("#isApplicant2").click(function () {
    if( $(this).is(':checked') ){
        $("#b2").fadeIn(500);
        $('#p3').fadeIn(500);
        $('#p4, #b4').fadeOut(500);
    }else{
        $('#b2, #p3, #b3, #p4, #b4').fadeOut(500);
        $('#isApplicant3, #isApplicant4').prop('checked', false);
    }
});

$("#isApplicant3").click(function () {
    $("#b3").fadeToggle(500);
    $('#p4').fadeToggle(500);
    if( $(this).is(':checked') ){
        $("#b3").fadeIn(500);
        $('#p4').fadeIn(500);
        $('#b4').fadeOut(500);
    }else{
        $('#b3, #p4, #b4').fadeOut(500);
        $('#isApplicant4').prop('checked', false);
    }
});

$("#isApplicant4").click(function () {
    $("#b4").fadeToggle(500);
});

References:

Setting "checked" for a checkbox with jQuery?

How to check whether a checkbox is checked in jQuery?

Thanks. had that part working already, though. Just need to follow this pattern/rule : if #2 is false (hidden) then #3 & 4 must be hidden as well. If #3 is hidden then #4 must be hidden — New2ASPMVC, Feb 26 '15 at 02:39
In that case, use `fadeIn` / `fadeOut` rather than `fadeToggle`. It's always best to be specific, and to use ` if ` conditions to show/hide the elements. The code is longer, but you get exactly what you want. — cssyphus, Feb 26 '15 at 02:53

Chaining/unbinding jQuery toggles

1 Answers1