jquery - 使用 Ajax 接收复选框值

Question

我有以下复选框定义:

{% for member in team_profile %}
    <div class="checkbox">
        <label> <input type="checkbox" id="checkboxes" value="{{ member.user_id }}">{{ member.first_name }}</label>
    </div>
{% endfor %}

其中 team_profile 仅包含一堆成员名称。所以我想得到 value={{member.userid}} 的东西。

所以对于我的 jquery 我有:

var myCheckboxes = new Array();
$("input:checked").each(function() {
    data['myCheckboxes[]'].push($(this).val());
});

$.ajax({
    type:'POST',
    url:'createEvent/',
    data:{
        name: name,
        myCheckboxes: myCheckboxes,
    }
});

所以我想收集所有值并将它们存储在名为 myCheckboxes 的数组中。但我收到错误数据未定义。还有其他方法可以做到这一点吗？

谢谢，安迪

编辑:

好的，我做了以下更改:

var myCheckboxes = new Array();
$("input:checked").each(function() {
    data['myCheckboxes[]'].push($(this).val());
});

$.ajax({
    type:'POST',
    url:'createEvent/',
    data:{
        name: name,
        myCheckboxes: myCheckboxes,
    }
});

在我的views.py中:

def createEvent(request):
    if request.method == "POST":
        member = request.POST.get('myCheckboxes')
        print(member)

但是当我打印出成员时，None 被输出。

Answer 1

一些建议...

首先，避免使用重复的 id="checkboxes" 属性，例如使用 use name="checkboxes":

{% for member in team_profile %}
    <div class="checkbox">
        <label> <input type="checkbox" name="checkboxes" value="{{ member.user_id }}">{{ member.first_name }}</label>
    </div>
{% endfor %}

此外，向数组添加数据的正确方法是使用 myCheckboxes.push(...):

var myCheckboxes = new Array();
$("input:checked").each(function() {
    myCheckboxes.push($(this).val()); // changed this line
});

$.ajax({
    type:'POST',
    url:'createEvent/',
    data:{
        name: name,
        myCheckboxes: myCheckboxes,
    }
});

最后，获取服务器上的值，如下所示:

def createEvent(request):
    if request.method == "POST":
        member = request.POST.getlist('myCheckboxes[]')
        print(member)