CODEWITHSUNDEEP
jquery
user3145348
user3145348

Reputation: 103

How to select all the input of child of ul list when parent input [checkbox] is chekced?

I want to check all the child input of list when parent input [checkbox] is checked.

<dd id="space_content">
<ul>
    <li parent-id="0" li-id="16"><input type="checkbox" value="16"/>Anthropology Department 
    <ul>
        <li parent-id="16" li-id="18"><input type="checkbox" value="18"/>Anthropology Faculty Collections
        </li>
        <li parent-id="16" li-id="23"><input type="checkbox" value="23"/>Shared Collections</li>
    </ul>
</li>
    <li parent-id="0" li-id="45"><input type="checkbox" value="45"/>Center for asdf on Vermont</li>
<li parent-id="0" li-id="19"><input type="checkbox" value="19"/>Center for Research on Vermont
    <ul>
        <li parent-id="19" li-id="24"><input type="checkbox" value="24"/>Collections for Testing
            <ul>
               <li parent-id="24" li-id="25"><input type="checkbox" value="25"/>Geology Department
                </li> 
            </ul>
        </li>
    </ul>
</li>
</ul>
</dd>

So far this is what I did but could not go any further.

$(function(){    
    $("#space_content > ul > li > input").click(function(){

       if($(this).is(':checked')){
           var $parent = $("#space_content > ul > li").children("ul");
           if($parent.has('input')){
               $parent.children('input').attr('checked','checked');
           }

        }
    }); 
});

Upvotes: 2

Views: 1264

Answers (7)

Adil
Adil

Reputation: 148150

You can use next() to get the next ul and find checkboxes in it and assign the current checkbox status to them. As you have checkboxes it better to go for them instead of input for being specific. Also use change event instead of click.

Live Demo

$(function(){    
    $("#space_content > ul > li :checkbox").change(function(){    
      $(this).next('ul').find(':checkbox').prop('checked', this.checked);
    }); 
});

Upvotes: 1

Usman
Usman

Reputation: 3278

Try this...

FIDDLE

$(function(){    
    $("#space_content > ul > li > input").click(function(){

       if($(this).is(':checked')){
           $(this).next('ul').find(':checkbox').prop('checked', this.checked);


        }
        else
        {
             $(this).next('ul').find(':checkbox').prop('checked', '');
        }
    }); 
});

this will check all the child checkboxes and uncheck as well

Upvotes: 0

Felix
Felix

Reputation: 38112

You should use .change() event instead of .click() for input elements as well as using .prop() instead of .attr() to set the checked state of your checkbox. You can shorten your code to:

$(function(){    
    $("#space_content > ul > li > input").change(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});

Fiddle Demo

If you got problem with .change() event in old browser such as IE8, you can use .click() instead:

$(function(){    
    $("#space_content > ul > li > input").click(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});

Upvotes: 1

Prakash M
Prakash M

Reputation: 651

Try this,

$(function(){    
    $("#space_content > ul > li > input").click(function(){
      $(this).siblings().find(':checkbox').attr('checked', this.checked);
    }); 
});

Live Demo

Upvotes: 0

Anant Dabhi
Anant Dabhi

Reputation: 11134

if u go thru a Jquery you can do this simple For this you need to add jquery lib

$(function () {
    $("#space_content > ul input").click(function () {

        $(this).next('ul').find('input').prop('checked', this.checked);

    });
});

Here is jsbin exmple

Upvotes: 0

Neel
Neel

Reputation: 11741

I guess this is what you wanted..I have sample code for your need 

   $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }  
    });

Demo :-

http://jsfiddle.net/mrc4N/9/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

Try

$(function () {
    $("#space_content > ul input").click(function () {
        $(this).next('ul').find('input').prop('checked', this.checked)
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions