Dynamic List Checkbox issue

Question

My code can be found here in JSFIDDLE

I have an issue regarding the dynamic checkbox selection in a list. If i check parent1 checkbox , the children of the parent 1 should only be checked.

Like if i check Parent1, Category 1.1, Category 1.2, Category 1.3 Should only be checked, And if i uncheck Parent 1, the childrens are also be unchecked.

As these values are coming from the database in a foreach loop, Which i have quoted below in my code.

Here is my code.

<div class="middle-right">
        <ul class="mid-right-list">
            <?php   
                foreach($pntrs AS $ps)
                {
                $catrs=$media->Catgselectn($ps['parent_id'],'sales_catmgmt');
            ?>

            <li><b>+ <?php echo $ps['parent_name'];?></b>

            <?php
                foreach($catrs AS $cg)
                {
            ?>
            <ul>
                <li><input type="checkbox" class="checkbox1" name="catg[]" value="<?php echo $cg['cat_id']; ?>"><?php echo $cg['cat_name']; ?></li>
            </ul>
            <? } ?>
              </li> 
             <?php
            }
            ?>
        </ul>
    </div>

Answer 1

Here is Jquery Solution. You can use jquery. JsFriddle

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
});

Answer 2

One way - you can write a jquery trigger for parent ids, that contain the different attribues. Then which parent checkbox is checked, find that id then mark those child checkboxes accordingly.

example of trigger:-

$(document).ready(function() {
   $('body').delegate('.parent_class_of_checkbox', 'click', function(evt) {
        // here mark checked to child checkbox.
    });
});