On button click make div visible if check box checked is true Using jquery

Question

I have 32 checkboxes (checkbox1,checkbox2,checkbox3.... checkbox32) and 32 div(div1,div2,div3.....div32) and one asp:Button.

On button click I need to make div1 visble if checkbox1 checked true and div2 visble if checkbox2 checked true and div3 visble if checkbox3 checked true and so on using 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 or it didn't happen.

Pow-Ian
– Pow-Ian

2012-12-14 17:21:36 +00:00
Commented Dec 14, 2012 at 17:21 — Pow-Ian
– Pow-Ian, Commented Dec 14, 2012 at 17:21
Nothing .. I am new to jquery... @ Explosion Pills

SRN
– SRN

2012-12-14 17:26:56 +00:00
Commented Dec 14, 2012 at 17:26 — SRN
– SRN, Commented Dec 14, 2012 at 17:26
@Explosion Pills - I have added the code..

SRN
– SRN

2012-12-14 17:43:54 +00:00
Commented Dec 14, 2012 at 17:43 — SRN
– SRN, Commented Dec 14, 2012 at 17:43

Explosion Pills · Accepted Answer · 2012-12-14 17:22:19Z

3

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

This goes through all checkboxes and shows/hides corresponding divs from all available divs. It's highly likely that you'll want to use more specific selectors.

answered Dec 14, 2012 at 17:22

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

On button click make div visible if check box checked is true Using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related