前端复选框的全选与反选

1.定义表头

<thead>
    <tr>
        <th style="width: 35px;"><input type="checkbox" onclick="CheckAllToggle(this)" /></th>
        {% for column in admin_class.list_display %}
            {% build_table_header_column column.0 column.1 orderby_key filter_conditions %}
        {% endfor %}
    </tr>
</thead>            

2.定义表内容结构

<tbody>
    {#{% get_query_sets admin_class as query_sets %}  {#as query_sets :取一个变量名 #}
    {% for obj in query_sets %}
    <tr>
        <td><input tag="obj_checkbox" type="checkbox" value="{{ obj.id }}"/></td>
        {% build_table_row request obj admin_class %}
    </tr>
    {% endfor %}
</tbody>

3.创建触发函数

</script>
    //checkbox 操作
    function CheckAllToggle(ele){
        if ( $(ele).prop("checked") ){
            $("input[tag='obj_checkbox']").prop("checked",true);
        }else {
            $("input[tag='obj_checkbox']").prop("checked",false);
        }
    }
</script>                

猜你喜欢

转载自www.cnblogs.com/chenjw-note/p/11101073.html