How to auto check the child checkboxes once the parent checkbox item is checked?

I am trying to autocheck the child elements when the parent element si checked. To have a clear picture please click on this url http://ift.tt/1IpYr0R.

I am using jquery to do this on every level but it only works for one level.

<script>

 $(document).ready(function(){
   $('#$i').change(function(){
   $('#checkbox-delv$j').prop('checked', $(this).prop("checked"));
    });
});
</script>

I am also sharing the source code

#set ($size = $discoverActorConfs.size())
#set ( $prev_actor_delv = "mycontent" )
#set ( $prev_impact = "fndsk" )


#foreach($i in [0..$size])

    #if($i < $size)
        </br>
        <table id="deliverable-table">
            <tbody>

            <tr class="impact-soy" >


                <div class=actors-$i style="margin-left: 56%; margin-right: auto" >

                    <script>

                        $(document).ready(function() {


                            $('div.actors-$i').connections({ from: 'div.new-div' }).length;
                            var connections = $('connection, inner');
                            setInterval(function() { connections.connections('update') }, 100);
                        });

                    </script>



                    #set ($actor_name = $discoverActorConfs.get($i).actor )
                    <span><input class="checkbox-actor" type="checkbox" name="actor-checkbox" onclick="addTotargetGroup('$actor_name', this);" id=$i>$discoverActorConfs.get($i).actor</span>
                                                                            <span class="remove aui-icon aui-icon-small aui-iconfont-remove"
                                                                                  title="Remove Actor" data-key="$discoverActorConfs.get($i).actor"
                                                                                  onclick="remove_actor('$discoverActorConfs.get($i).actor')">
                                                                                </span>



                    #set ($prev_actor_delv = $discoverActorConfs.get($i).actor)

                </div>

                #set ($size_impact = $discoverImpactConfs.size())
                #foreach($j in [0..$size_impact])

                    #if($j < $size_impact)

                        #if($discoverImpactConfs.get($j).actor == $prev_actor_delv )
                            <div class=impact-$j style="margin-left: 25%; margin-right: auto;" id="delvs-impact">


                                #set ($impact_name = $discoverImpactConfs.get($j).impact )
                                <span><input class="checkbox" type="checkbox" name="impact-checkbox" id="checkbox-delv$j" onclick="addToBigPicture('$impact_name', this);">$discoverImpactConfs.get($j).impact</span>
                                 <span class="remove aui-icon aui-icon-small aui-iconfont-remove"
                                       title="Remove Actor" data-key="$discoverImpactConfs.get($j).impact"
                                       onclick="remove_impact('$discoverImpactConfs.get($j).impact')">
                                                                                </span>
                                #set ($prev_impact = $discoverImpactConfs.get($j).impact)




                                <script>
                                    $(document).ready(function(){
                                        $('#$i').change(function(){
                                            $('#checkbox-delv$j').prop('checked', $(this).prop("checked"));

                                        });
                                    });

                                </script>


                                <script>

                                    $(document).ready(function() {

                                        $('div.impact-$j').connections({ from: 'div.actors-$i' }).length;
                                        var connections = $('connection, inner');
                                        setInterval(function() { connections.connections('update') }, 100);
                                    });
                                </script>
                            </div>


                            #set ($size_deliverables = $discoverDeliverablesConfs.size())

                            #foreach($k in [0..$size_deliverables])
                                #if($k < $size_deliverables)
                                    #if($discoverDeliverablesConfs.get($k).impact == $prev_impact and $discoverDeliverablesConfs.get($k).actor== $prev_actor_delv)
                                        <div class=deliverable-$k id="delvs">


                                            <span><input class="checkbox" type="checkbox" name="deliverable-checkbox" id="checkbox-delv$k" onclick="addReleaseTarget('$impact_name', this);">$discoverDeliverablesConfs.get($k).deliverable</span>
                                            <span class="remove aui-icon aui-icon-small aui-iconfont-remove"
                                                  title="Remove Actor" data-key="$discoverDeliverablesConfs.get($k).deliverable"
                                                  onclick="remove_impact('$discoverDeliverablesConfs.get($k).deliverable')">
                                                                                </span>

                                            <script>                                                    $(document).ready(function() {

                                                    $('div.deliverable-$k').connections({ from: 'div.impact-$j' }).length;
                                                    var connections = $('connection, inner');
                                                    setInterval(function() { connections.connections('update') }, 100);
                                                });
                                            </script>
                                        </div>

                                    #end

                                    <script>
                                        $(document).ready(function(){
                                            $('#checkbox-delv$j').change(function(){
                                                $('#checkbox-delv$k').prop('checked', $(this).prop("checked"));

                                            });
                                        });

                                    </script>

                                #end

                            #end

                        #end

                    #end

                #end

    </div>
        </tr>
        </tbody>
        </table>
    #end
#end