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視圖。

我希望將數據發送回Django視圖，並將所有選定的值與Ajax一起列表，儘管我現在只是制定一個常規表單。

所以，如果我選擇的第一個和最後複選框，我會送這回的觀點：

data = ["document_1", "document_3] 

我已經嘗試設置這樣的變量：

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

和我仍然在Ajax上工作，但一直未能取得很大進展。

Answer 1

您可以：

1. 測試布爾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

嘗試與形式圍繞着它：

<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」 值ST：

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(',')方法將分隔每個複選框的值。