javascript - Django - 检索复选框的值

Question

如何检索多个 html 复选框的值并将其发送回我的 View ？复选框具有相同的名称:

<input type="checkbox" value="document_1" name="checkbox_1">
<input type="checkbox" value="document_2" name="checkbox_1">
<input type="checkbox" value="document_3" name="checkbox_1">

我正在尝试为用户提供选择多个复选框的选项，然后将该数据发送回 Django View 。

我希望通过 Ajax 将数据作为所有选定值的列表发送回 Django View ，尽管我现在只是在处理常规表单。

因此，如果我选择了第一个和最后一个复选框，我会将其发送回 View :

data = ["document_1", "document_3]

我试过像这样设置一个变量:

var data = $('.checkbox_1:checked').val()

我仍在研究 Ajax，但尚未取得太大进展。

Answer 1

您可以:

1. 测试每个复选框的 bool checked 属性(在 jQuery 或 native javascript 中)；
2. 根据结果构建数组；
3. 可选择将数组转换为常规对象(javascript数组已经是对象)；然后
4. 将常规对象或数组转换为 JSON(然后您可以通过 Ajax 发送)。

$(document).ready(function(){

    var checkedCheckboxes = [];

    $('button').click(function(){
        $('input').each(function(){
            if ($(this).is(':checked')) {
                checkedCheckboxes.push($(this).val())  
            }
        });

    // Now we have an array
    console.log('JS Array: ');
    console.log(checkedCheckboxes);

    // Convert array to standard Javascript Object Literal
    var checkedCheckboxesObject = $.extend({}, checkedCheckboxes);
    console.log('JS Object: ');
    console.log(checkedCheckboxesObject);

    // Convert Object Literal to JSON
    var checkedCheckboxesJSON = JSON.stringify(checkedCheckboxesObject);
    console.log('JSON: ');
    console.log(checkedCheckboxesJSON);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<input type="checkbox" value="document_1" name="checkbox_1">
<input type="checkbox" value="document_2" name="checkbox_1">
<input type="checkbox" value="document_3" name="checkbox_1">
<button type="button">Submit</button>
</form>