如果选中复选框为真，则在按钮上单击使div可见使用jquery

Question

我有32个复选框（checkbox1，checkbox2，checkbox3 .... checkbox32）和32 div（div1，div2，div3 ..... div32）和一个asp：Button。

单击按钮，如果checkbox1选中true，则需要使div1成为可见，如果checkbox2选中true则div2可见，如果checkbox3选中为true，则div3可见，等等，使用JQuery ...

<div class="CheckBoxDiv ">
        <asp:CheckBox ID="checkBox1" runat="server"  />

    </div>
        <asp:CheckBox ID="checkBox2" runat="server"  />

    </div>        .
                  .
                  .

<asp:Button ID="buttonShowData" runat="server" Text="Show data" class="ShowDataButton"  />

<div id="div1" runat="server" visible="false">
               ......
</div>
<div id="div2" runat="server" visible="false">
               ......
</div>
                    .
                    .

Answer 1

$("button").on('click', function () {
    $(":checkbox").each(function (idx) {
       if ($(this).is(":checked")) {
          $("div").eq(idx + 1).show();
       }
       else {
          $("div").eq(idx + 1).hide();
       }
    });
});

这会遍历所有复选框，并显示/隐藏来自所有可用div的相应div。您很可能想要使用更具体的选择器。