JQuery: Checkbox with 3 level auto select child or parent

Question

I have a table that look like this:

<table border="1">

 <tr>
   <td>Parent</td>
   <td>Child</td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 1</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 2</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename3" value="3">Sub Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename4" value="3">Sub Child 4</li>   
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>    
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 3</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;Others Reason: <input type="text" level="subchild" size="50" name="other" ></li>      
   </td>
 </tr>   

</table>

And jquery code like this:

$('input[@type=checkbox][level$="child"]').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('input[@type=checkbox][level$="parent"]').attr('checked', true);
    }
});

$('input[@type=checkbox][level$="subchild"]').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('input[@type=checkbox][level$="child"]').attr('checked', true);        
        $('input[@type=checkbox][level$="parent"]').attr('checked', true);        
    }
});

1) How do i check only current row of parent checkbox when child checkbox is clicked?

2) How do i check only current row of parent checkbox + child checkbox when sub child checkbox is clicked?

-Current issue is when you check 1 subchild it will select all the checkbox there.

-Example (Parent 1 row): If i select either Sub Child 1 or Sub Child 2 the code should be auto select Child 2 AND Parent 1

-JSFiddle Here: http://jsfiddle.net/YDgHN/2/

Any help would be great. Thanks

Answer 1

For Issue One:

$('input[@type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
            $(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);
        }
    });

For Issue Two:

    $('input[@type=checkbox][level="subchild"]').click(function (event) {
            var checked = $(this).is(':checked');

            if (checked) {
   // Two select Parent element   
         $(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);

   // Two select Child element. You will have to loop through all the li elements to //find the appropriate child element 

                $(this).parent().prevAll('li').each(function () {
                    var found = $(this).children('input[@type=checkbox]').attr('level') == 'child';
                    if (found) {
                        $(this).children('input[@type=checkbox][level="child"]').attr('checked', true);
                        return false;
                    }
                });
            }
        });