zoukankan      html  css  js  c++  java
  • 前端获取checkbox复选框的值 通过数组形式传递

    html代码:

    <form role="form" class="select_people">
           
            <div style="display: inline-block; margin-left: 30px; margin-top: 0">
                  <label for="name">应用一组</label>
                   {% for peopel_1 in peopels_1 %}
                       <div class="checkbox">
                        <label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label>
                         </div>
                    {% endfor %}
             </div>
             <div style="display: inline-block; margin-left: 40px">
                  <label for="name">应用二组</label>
                  {% for peopel_2 in peopels_2 %}
                        <div class="checkbox">
                         <label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label>
                         </div>
                   {% endfor %}
               </div>
                                                   
            <button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal"
     class="btn btn-default">提交</button>
    
    </form>    
    


    js代码:

      1 获取已选中的名字并放到数组中

      var name_list = [];

      $("input[name='people_name']:checked").each(function(){

        name_list.push($(this).val)

    });

      2 利用ajax向后台传递form表单数据

      $(".select_people").submit(function(event){

        event.preventDefault();  // 阻止默认表单的action功能

        var name_list = [];

        $("input[name='people_name']:checked").each(function(){

          name_list.push($(this).val)

        });

        data = {'id': 1, 'names': name_list};

        $.ajax({

        url: "task_mgm/********",

        type: "POST",

        data: JSON.stringify(data),

        contentType: "application/json",  //发送到后台的数据格式

        data_type: "json",  // 接收后端返回的数据格式

        success: function(resp){

          if (resp.error == "OK"){ console.log('分享成功') }

          else { console.log('分享失败') }

        }

      });

    })

    python后台代码:

     1 @task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET'])
     2 @login_required
     3 def taskinfo_share_people_fun():
     4     datas = request.get_json()
     5     task_id = datas.get('id')
     6     sharePeopleList = datas.get('names')
     7     print(sharePeopleList)
     8     task = ShareTask()
     9     if len(sharePeopleList) > 0:
    10         task.taskId = task_id
    11         
    12         sharePeopleList = list(set(sharePeopleList))  # 去重
    13         sharePs = ','.join(sharePeopleList)
    14         task.sharePeopleTo = sharePs
    15         task.sharePeopleFrom = current_user.name
    16         db.session.add(task)
    17         db.session.commit()
    18         return jsonify(error='OK', emsg="True")
    19     else:
    20         return jsonify(error='NO', emsg="False")
    View Code
  • 相关阅读:
    java编译错误No enclosing instance of type TestFrame is accessible. Must qualify the allocation with an enclosing instance of type TestFrame (e.g. x.new A(
    java 2中创建线程方法
    动态规划基本思想
    关于eclipse编译一个工程多个main函数
    java Gui初识
    Eclipse中java项目的打包
    java 播放声音
    把资源文件夹导入到eclipse中
    Java建立JProgressBar
    How to grant permissions to a custom assembly that is referenced in a report in Reporting Services
  • 原文地址:https://www.cnblogs.com/We612/p/10361726.html
Copyright © 2011-2022 走看看