checkboxes checked - show its correspondig div

Question

I found this script where one checkbox (once checked) shows the corresponding div. When Checkbox is Checked Expand Div

But I have multiple checkboxes, which shows its corresponding div once checked.

I tried to add the following to the html file but that didn't work:

<div style="clear: both;"></div>

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div id="mycheckboxdiv" style="display:none">
  This content should appear when the checkbox is checked
</div>

You question is basically the same as the linked one, so i don't understand why you posted this question. — ViRuSTriNiTy, Dec 30 '15 at 13:26

score 2 · Accepted Answer · answered Dec 30 '15 at 13:24

2

Just simply use CSS :checked property for this:

input + div {
  display: none;
}
input:checked + div {
  display: block;
}

<input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
<div id="mycheckboxdiv">
  This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox1" id="mycheckbox1" value="0" />
<div id="mycheckboxdiv1">
  This content should appear when the checkbox is checked
</div>

answered Dec 30 '15 at 13:24

Praveen Kumar Purushothaman

164,888
24
203
252

Thks. it seems to work now but how do I get the checkboxes to be underneath each other.. I tried adding '
' but then it goes wrong – MK69 Dec 30 '15 at 13:44
@MK69 Add `input {display: block;}` – Praveen Kumar Purushothaman Dec 30 '15 at 13:45
I've added a fiddle but have a problem with the first checkbox. It behaves different from the other ones. https://jsfiddle.net/mk13011969/61eehop9/ – MK69 Dec 30 '15 at 14:03
What's the script doing there @MK69? **Did I add any script?** Remove the script and tell what's happening. – Praveen Kumar Purushothaman Dec 30 '15 at 14:04
Thanks Mr. Kumar.. it works indeed without the javascript :-) – MK69 Dec 30 '15 at 14:09
The result is now however that I cannot add text to the checkbox like: `cars` or `trains`.. Trains or Cars will be put underneath the checkbox. @praveen Kumar – MK69 Dec 30 '15 at 21:33
@MK69 Ah... I get that. – Praveen Kumar Purushothaman Dec 30 '15 at 21:48
So how can I get the text (trains or cars) NEXT to the checkbox? – MK69 Dec 30 '15 at 21:52
@MK69 I am still thinking about it. – Praveen Kumar Purushothaman Dec 30 '15 at 21:52

score 0 · Answer 2 · answered Dec 30 '15 at 13:27

    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" data-divid="mycheckboxdiv"/>
    <div id="mycheckboxdiv" style="display:none">
    This content should appear when the checkbox is checked
    </div>

    //js code

    $(document).body(function(){
     $("input[type='text']").change(function(){
        var val=$(this).attr('data-divid');
       if($(this).attr('checked')){
         $("div [id='"+val+"']").show();}
       else{
         $("div [id='"+val+"']").hide();}        
     });
    });

score 0 · Answer 3 · answered Dec 30 '15 at 13:29

Another solution is to wrap your items in a container div and when user checks the check box,use closest() to get the container div,then use find to get the associated text div and show/hide it.

I prefer using closest() and find() than next() method because the first one will work even if you add some new element in between your checkbox and the associated div in the future.

<div class="itemContainer">
  <input type="checkbox" name="mycheckbox" id="mycheckbox" value="0" />
  <div id="mycheckboxdiv" class="meta" style="display:none">
      This content should appear when the checkbox is checked
   </div>
</div>

And your jQuery code to handle the checkcbox checcked event

$(function(){

  $("input[name='mycheckbox']").change(function(e){

     var _this=$(this);
     if(_this.prop("checked"))
     {
        _this.closest(".itemContainer").find(".meta").show();
     }
     else
     {
         _this.closest(".itemContainer").find(".meta").hide();
     }
  });

});

Here is a working sample

I like your script but it works only for all checkboxes named "mycheckbox".... The checkboxes in my application are named "compid.$thistag_id" where $thistag_id is a variable. How can I change the script as such that it works with all checkboxes starting with the name: compid (whatever the variable is) — MK69, Dec 31 '15 at 18:20
You can do a starts with jQuery library Take a look http://jsbin.com/tiqiga/edit?html,js,console,output — Shyju, Dec 31 '15 at 18:44

checkboxes checked - show its correspondig div

3 Answers3