前端複選框的全選與獲取數據

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>