jquery - 如何根据其他复选框的选中状态来选中复选框？

Question

我正在使用 smarty 模板引擎来显示 HTML 输出。以下是我的两组复选框的代码：

<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>

这个问题也附有相关的屏幕截图。现在我想要做的是，如果选中了类名中的任何复选框，则应选中其相关主题数组中的任何复选框，反之亦然（意味着如果用户选中主题数组中的任何复选框，则相关类名称复选框应在取消选择主题时选中和取消选中）。我必须通过jQuery来实现。我是 jquery 的新手，所以我对此没有太多的想法。谁能帮助我实现这一目标？提前致谢。

Answer 1

请参考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:这有一个缺点：如果您取消选中一门科目，则课程将取消选中。如果我有时间，我会这样做并稍后更新小提琴。