zoukankan      html  css  js  c++  java
  • 前端复选框的全选与获取数据

    1.定义表头

    <thead>
        <tr>
            <th style=" 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>    
  • 相关阅读:
    Flask基本介绍
    【Maven】使用Maven构建多模块项目
    spring data jpa 详解
    request.getParameterNames()和request.getParameterValues()
    JAVA字符串格式化-String.format()的使用
    Java中的String,StringBuilder,StringBuffer三者的区别
    Java总结篇系列:Java泛型
    <c:forEach>详解
    Spring MVC 相关资料整理
    关于${pageContext.request.contextPath}的理解 (转载)
  • 原文地址:https://www.cnblogs.com/chenjw-note/p/11101073.html
Copyright © 2011-2022 走看看