Question

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

<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视图。

我希望将数据作为Ajax所有选定值的列表发送回Django视图，尽管我现在正在编写常规表单。

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

data = ["document_1", "document_3]

我尝试设置这样的变量：

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

我仍然在研究Ajax，但还没有取得很大进展。

Answer 1

你可以：

测试每个复选框的布尔checked属性（在jQuery或本机javascript中）;
根据结果构建数组;
可选择将数组转换为常规对象（javascript数组已经是对象）;然后
将常规对象或数组转换为JSON（然后可以通过Ajax发送）。

＆＃13;

$(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);

    });
});

＆＃13;

<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>

＆＃13;

Answer 2

尝试用表单包围它：

<form method="post" id="list-action">
<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" class="js-use-selected">Submit</button>
</form>

然后在你的ajax中，执行此操作：

$(".js-use-selected").click(function () {
  $.ajax({
    url: '/path/to/',
    data: $("#list-action").serialize(),
    dataType: 'json',
    type: 'post',
    success: function (data) {

    }
  });
});

在views.py中，您可以通过复选框元素的名称获取“checkbox_1”值的列表：

values = request.POST.getlist('checkbox_1')

如果不起作用，请尝试：

values = request.POST.getlist('checkbox_1[]')

然后，例如：

MyModel.objects.filter(fieldname__in=values)

Answer 3

<form action="">
    <input type="checkbox" name="checkbox_1" value="checkbox_1" class="checkbox">
    <input type="checkbox" name="checkbox_1" value="checkbox_2" class="checkbox">
    <input type="checkbox" name="checkbox_1" value="checkbox_3" class="checkbox">
    <input type="checkbox" name="checkbox_1" value="checkbox_4" class="checkbox">
    <button type="button" id="submit-button">Send data to server</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var selected_items = [];
    $(".checkbox").click(function(){
        var selected_item = $(this).val();
        var index = selected_items.indexOf(selected_item);
        if(index == -1)
        {
           selected_items.push(selected_item);
        }
        else{
           selected_items.splice(index, 1);
        }
    });
    $("#submit-button").click(function(){
        $.ajax({
            url: '/path/to/',
            data: {'checkboxes': selected_items.join(","), 'csrfmiddlewaretoken': {{csrfmiddlewaretoken}} },
            dataType: 'json',
            type: 'post',
            success: function (data) {
            }
        });
    });
})
</script>

在django视图中，您可以使用request.POST['checkboxes']获取复选框的值。将split(',')方法应用于此值将分隔每个复选框的值。

Django - 检索复选框的值

3 个答案: