JQuery Checkbox issue

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.

Reigel Gallarde · Accepted Answer · 2010-07-12 09:19:24Z

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

edited Jul 12, 2010 at 9:19

answered Jul 12, 2010 at 9:04

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

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

1 Comment

redsquare Over a year ago

no need for $("input:checkbox:checked").length == 0, just use if ( !$("input:checkbox:checked").length )

Collectives™ on Stack Overflow

JQuery Checkbox issue

1 Answer 1

demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related