前端复选框的全选与获取数据

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);
            }
        }

        //得到选中checkbox的数据
        function ActionSubmit(form_ele) {
            //$("input[tag='obj_checkbox']:checked") #获取已选中checkbox的对象
            var selected_ids = [];
            $("input[tag='obj_checkbox']:checked").each(function () {   //each()：循环对象
                selected_ids.push($(this).val());   //将得到的值放进列表
            })
            var selected_action = $("#action_list").val();  //获取选中的动作action
            //console.log(selected_ids);
            //console.log(selected_action);
            if (!selected_action){
                alert("没有选中操作动作！")
                return false;
            }
            if (selected_ids.length == 0){
                alert("没有选中数据！")
                return false;
            }

            //开始提交到后台
            var selected_ids_ele = "<input name='selected_ids' type='hidden' value='"+ selected_ids.toString() + "' >"
            $(form_ele).append(selected_ids_ele)
            return true;
        }
    </script>    

 

转载于:https://www.cnblogs.com/chenjw-note/p/11101073.html