如何根据其他复选框的选中状态选中复选框?

时间:2013-05-08 11:55:15

标签: jquery 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的新手,所以我没有太多的想法。有谁可以帮我实现这个目标?在此先感谢。enter image description here

1 个答案:

答案 0 :(得分:0)

请参阅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:这有一个负面观点:如果你取消选中一个主题,那么课程将取消选中。如果我有时间我会这样做并稍后更新小提琴。