Question

I have dynamic page.

There are multiple checkboxes & I am using this script to show its respected <div> only if checkbox is checked.

        $(document).ready(function() { 
          $("#checkbox$").click(function() { 
            if (this.checked) {
              $('#appear_div$').fadeIn('slow'); 
            }
            else {
              $('#appear_div$').fadeOut('slow'); 
            }
          }); 
        });   

    // Here $ is unique ID number for each <div> as my content is dynamic & 
    // I am using {foreach} tag.

Now, I have another parent in which I want all above to be appear.

But If none of the above checkbox is checked Hide this Parent div too.

Here is Code I am using for that

function doInputs(obj){
 var checkboxs = $("input[type=checkbox]:checked");
 var i =0, box;
 $('#parent_div').hide();         
     while(box = checkboxs[i++]){
     if(!box.checked);
     $('#parent_div').show();
     break;              
     }
}

This code is working fine except this problem…

Say,

I check Checkbox ID 1 —> #parent_div show —> #appear_div1 show —

I check Checkbox ID 2 —> #parent_div show —> #appear_div2 show —

Then

I Uncheck Checkbox ID 1 —> #parent_div show —> #appear_div1 Hide —

I Uncheck Checkbox ID 2 —> #parent_div Hide —> #appear_div2 Hide —

Then Again IF

I Uncheck Checkbox ID 2 —> #parent_div Show —> #appear_div2 Show —

Now Here is problem…

Even Checkbox ID 1 is not checked I can see #appear_div1 in #parent_div.

Why is That ? Where I am going wrong ???

Thanks.

Answer 1

    $(document).ready(function() { 
      $("#checkbox$").click(function() { 
        if (this.checked) {
          $('#appear_div$').fadeIn('slow'); 
        }
        else {
          $('#appear_div$').fadeOut('slow'); 
        }
        if ($("input:checkbox:checked").length){
             $('#parent_div').show();
        } else {
             $('#parent_div').hide();
        }
      }); 
    });

demo