前端获取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
原文地址:https://www.cnblogs.com/We612/p/10361726.html