CODEWITHSUNDEEP
jquerycheckboxshow-hide
user3408779
user3408779

Reputation: 997

How to Show or Hide multiple divs with multiple checkboxes

I have a requirement, that I have multiple check boxes. I have a set of checkbox related content which are in <p> tags. When page loads all the <p> tag related content will display. After when user selects any checkbox then only that checkbox related content will display and remaining will hide. Next when user selects second checkbox second checkbox related content will display.

Below is the <p> tag content like this i have 20 <p> tags

<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>

<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2

Here is my code 

$(document).ready(function()
{
    if($(this).prop('checked'))
    {
        $('#chk1').prop('checked', true);
        $("#sb2,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").hide();
    }
    else
    {
        $('#chk2').prop('checked', false);
        $("#sb1,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").show();
    }
});

Can some one please help me, like this i have 20 checkboxes and 20 <p> tags, i tried in many ways .

Please help me in this regard, any help be greatly appreciated..

Upvotes: 2

Views: 11891

Answers (5)

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

DEMO

Html Part:

<pre>
<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>
<p id="sb3">Checkbox content three</p>
<p id="sb4">Checkbox content four</p>
</pre>

<pre>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2
</pre>

Javascript Part:

$(document).ready(function()
{
    $('p').hide();

    $('#chk1').change(function(){ 
        var tags=$("#sb1,#sb2");
       if($(this).attr('checked'))
       {
           tags.show();
       }
        else{
           tags.hide();
       }
    });

    $('#chk2').change(function(){ 
       var tags=$("#sb3,#sb4");

       if($(this).attr('checked'))
       {
           tags.show();
       }
        else{
            tags.hide();
       }
    });
});

Upvotes: 0

steo
steo

Reputation: 4656

First of all, inside you're script the this scope is the document not the checkboxes. Then, you have to bind the behaviour to the checkboxes and above all, use class instead of ids or you will get mad so: 

<pre>
  <p class="sb">Checkbox content one</p>
  <p class="sb">Checkbox content two</p>
  ...
</pre>

<pre>
  <input name="chk1" type="checkbox" id="chk1" value="">chekme1
  <input name="chk2" type="checkbox" id="chk2" value="">checkme2
</pre>

then: 

$(function(){

 $("#chk1").on('change', function(){
    if($(this).prop('checked'))
     $(".sb").hide();
     $(".sb").eq(0).show();
 })

 $("#chk2").on('change', function(){
    if(!$(this).prop('checked'))
     $(".sb").eq(0).hide();
     $(".sb").show();
 })
})

Here it is a fiddle: http://jsfiddle.net/8sm8njjs/1

With your code the situation is kinda tricky, maybe try to explain also what you are trying to achieve

Upvotes: 0

Shijin TR
Shijin TR

Reputation: 7788

HTML

   <p id="sb1"  class="p_element">Checkbox content one</p>
   <p id="sb2"  class="p_element">Checkbox content two</p>

   <input name="chk1" class="check_box" type="checkbox" data-ptag="sb1" id="chk1" value="">chekme1
   <input name="chk2"  class="check_box" type="checkbox" data-ptag="sb2" id="chk2" value="">checkme2

jQuery

$('.check_box').change(function(){
if($('.check_box:checked').length==0){
    $('.p_element').show(); //Show all,when nothing is checked
}else{
    $('.p_element').hide();
    $('.check_box:checked').each(function(){
        $('#'+$(this).attr('data-ptag')).show();
    });
  }

});

FIDDLE DEMO

Upvotes: 3

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Try this : Use jQuery start with selector and hide all contents first then show respective content.

<script>
       $(document).ready(function()
       {
           //hide all contents
           $('p[id^=sb]').hide();

           $('input[id^=chk]').change(function(){

              // get checkbox index
              var index = $(this).attr('id').replace('chk','');

              //show respective contents
              if($(this).is(':checked'))
                $('#sb'+index).show();
              else
                $('#sb'+index).hide();
           });

        });
  </script>

Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Try

var first = true;
$('input[type="checkbox"][name^=chk]').change(function () {
    var $target = $('#sb' + this.id.replace('chk', '')).toggle(this.checked);
    if (first) {
        $('p[id^=sb]').not($target).hide();
        first = false;
    }
})

Demo: Fiddle

Upvotes: 1

Related Questions