jQuery处理点击父级checkbox所有子级checkbox都选中,取消选中所有子级checkbox都取消

时间:2021-12-03 08:45:42

注意,每个foreach标签内部都加一个div用来区分各个层次关系,模板代码如下:

<foreach name='node' item='v'>
            <div class='a' align='center' style='padding-bottom:10px;color:#0000EE'>
                {$v.title}&nbsp;
                <input type="checkbox" name='access[]' level='1' value='{$v.id}_1' <if condition='$v["access"]'>checked='checked'</if>>
                <foreach name='v.child' item='value'>
                    <div class='b'>
                        <li style='list-style-type:none;font-size:14px;padding-top:5px;color:#8B1A1A'>
                            {$value.title}&nbsp;
                    <input type="checkbox" name='access[]' level='2' value='{$value.id}_2' <if condition='$value["access"]'>checked='checked'</if>></li>
                    <foreach name='value.child' item='value1'>
                        <div class='c'>
                        <li style='list-style-type:none;font-size:13px;padding-top:5px;color:#8E8E38'>{$value1.title}&nbsp;
                            <input type="checkbox" name='access[]' level='3' value='{$value1.id}_3' <if condition='$value1["access"]'>checked='checked'</if>></li>
                            </div>
                        </foreach>
                    </div>
                </foreach>
            </div>
        </foreach>

以下是jQuery代码:

<script src='__PUBLIC__/js/jquery-1.6.4.min.js'></script>
    <script>
        $(function(){
            $('[level=1]').click(function(){
                if(this.checked){
                    $(this).parent().find('input').prop('checked','checked');
                }
                else{
                    $(this).parent().find('input').removeAttr('checked');
                }
            });
            $('[level=2]').click(function(){
                if (this.checked) {
                $(this).parent().parent().find('input').prop('checked','checked');
            }
            else{
                $(this).parent().parent().find('input').removeAttr('checked');
            }
            });
        });
    </script>