Question

我有一个带有几个隐藏div的应用程序。选中复选框后，div会显示另一个复选框以显示另一个隐藏的div。总共有三个隐藏的div，最后一个div（显然）不包含此复选框。

我使用以下脚本：

$(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>

我已经解决了一个缺点（一个主要的缺点），我无法弄清楚如何治愈。如果第一个div切换（＃isApplicant2）为false，我需要将所有其他切换设置为false，并为每个后续设置相同。所以＃isApplicant2不能是false而是显示其他隐藏的div。

我已经搜索过高低，但我只是迷失了.unbind的概念，如果这是正确的方法。

Answer 1

这样的事情：

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

参考文献：

Setting "checked" for a checkbox with jQuery?

How to check whether a checkbox is checked in jQuery?

链接/解除绑定jQuery切换

1 个答案: