How to make checkbox checked depending on the checked status of other group of checkboxes?

Question

I'm using smarty template engine to display HTML output. Following is my code for two groups of checkboxes :

<table width="99%" border="0" cellpadding="5" cellspacing="5">
                        <tr><td colspan="2" id="test_package_error_msgs" style="display:none;"  class="errorMsg"></td></tr>
                        <tr height="35">
                            <td colspan="2" id="test_package_loader" height="10" align="center" style="display:none;"></td>
                        </tr>
                        <tr>
                            <td align="center"><b>Select Classes</b></td>
                            <td align="center"><b>Class Subjects</b></td>
                        </tr>       
                        <tr><td colspan="2">&nbsp;</td></tr>
                        {section name=map loop=$cs_map_data}        
                      <tr height="30">
                        <td align="center" width="300"  valign="top">                                                                   
                          <input type="checkbox" name="class_ids_[]" id="class_id_{$cs_map_data[map].class_id}" value="{$cs_map_data[map].class_id}" {if in_array($cs_map_data[map].class_id, $cls_data)}checked="checked"{/if}/>   
                          {$cs_map_data[map].class_name}</td>
                          <td>                                                                  
                          <table>
                            <tr>
                            {assign var='i' value=0}                            
              {section name=subject loop=$cs_map_data[map].class_subjects}
              {if $i%4 == 0}</tr><tr>{/if}
                <td align="left" valign="top" width="150">
                <input type="checkbox" name="cs_map_ids[]" id="{$cs_map_data[map].class_subjects[subject].cs_map_id}" value="{$cs_map_data[map].class_subjects[subject].cs_map_id}" {if in_array($cs_map_data[map].class_subjects[subject].cs_map_id, $data)}checked="checked"{/if}/>
                {$cs_map_data[map].class_subjects[subject].subject_name}
                </td>
                {assign var='i' value=$i+1}
              {/section} 
              </tr>
            </table>
                        </td>
                    </tr>
                    {/section}  
                    <tr>
                        <td colspan="2" valign="top" align="center"><input type="submit" name="btn_submit" id="btn_submit" value="{$submit_value}" class="submit">  &nbsp;&nbsp;
                        <input type="button" name="back" id="back" value="{$cancel_value}" class="submit" onclick="javascript:window.location.href='{$control_url}modules/teachers/teachers.php?op={$query_string}'" />

                        </td>
                    </tr>
                </table>

The concerned screen shot is also attached with this question. Now what I want to do is if any of the check box from class names is checked then anyone check box from its concerned subjects array should get checked and vice-versa(means if user checks any of the checkbox from subjects array then the concerned class name checkbox should be checked and unchecked upon de-selection of subject). I have to achieve through jQuery. I'm a newbie in jquery so I don't have too much ideab about that. Can anyone help me in achieving this? Thanks in advance.

Answer 1

Please refer http://jsfiddle.net/2dJAN/22/

$(".student_class").on("click", function(){
    if( $(this).is(':checked') ) {
        $(this).parents('tr').find("input:checkbox").prop("checked",$(this).prop("checked"))
    }else{
    $(this).parents('tr').find("input:checkbox").attr( "checked", false );
    }
});

$('table td:not(:first-child) input:checkbox').on("click",function(){
    if ($(this).is(':checked')){
        $(this).closest('tr').children('td:first').find('input:checkbox').prop("checked",$(this).prop("checked"))
    }else{
         $(this).closest('tr').children('td:first').find('input:checkbox').attr( "checked", false );
    }
});

Note: This have one negative point: If you uncheck one subject, class will unchecked. If i have time i will to that and update the fiddle later.