Django - Получить значения флажков

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, хотя сейчас я просто разрабатываю обычную форму.

Так что если я выбрал первый и последний флажок, я бы отправить это обратно к представлению:

data = ["document_1", "document_3] 

Я попытался установить переменную так:

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

и я все еще работающие над Ajax, но не смогли добиться значительного прогресса.

Answer 1

Вы можете:

1. Test булево checked свойство для каждого флажка (в любом JQuery или в родном 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>

Answer 2

Try, чтобы окружить его с формой:

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

, а затем в вашем Аякса сделать это:

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

    } 
    }); 
}); 

В вашем views.py вас может получить ли го из "checkbox_1" значений по имени CheckBox элементов:

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(',') к этому значению будет разделять значения каждого флажка.