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
  • 相关阅读:
    golang中将json转成go
    软件升级
    golang 各类型转换
    golang 基础知识6
    golang 基础知识5
    bash resource
    toy
    links
    android abd remove
    YCM
  • 原文地址:https://www.cnblogs.com/We612/p/10361726.html
Copyright © 2011-2022 走看看