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

【问题标题】：On button click make div visible if check box checked is true Using jquery如果选中的复选框为真，则单击按钮使 div 可见使用 jquery
【发布时间】：2012-12-14 17:19:58
【问题描述】：

我有 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>
                    .
                    .

【问题讨论】：

code/html 或者它没有发生。
没什么..我是 jquery 的新手...@Explosion Pills
@Explosion Pills - 我已经添加了代码..

标签： jquery

【解决方案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。您很可能想要使用更具体的选择器。

【讨论】：