Django - Werte von Checkboxen abrufen

Question

Wie kann ich die Werte mehrerer HTML-Checkboxen abrufen und an meine Ansicht zurücksenden? Die Kontrollkästchen haben den gleichen Namen:

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

Ich versuche, dem Benutzer die Möglichkeit, die Auswahl mehrere Kontrollkästchen zu geben und dann zu einer Django Ansicht, dass die Daten zurückschicken.

Meine Hoffnung ist es, die Daten zurück in eine Django-Ansicht als eine Liste aller ausgewählten Werte mit Ajax zu schicken, obwohl ich jetzt einer regelmäßigen Form bin nur die Arbeit aus.

Wenn ich also das erste und letzte Option ausgewählt haben, würde ich diese zurück in die Ansicht senden:

data = ["document_1", "document_3] 

Ich habe versucht, eine Variable wie diese Einstellung:

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

und ich bin immer noch am Ajax arbeiten, aber nicht in der Lage, große Fortschritte zu machen.

Answer 1

Sie können:

1. Testen Sie die boolean checked Eigenschaft für jede Option (entweder jQuery oder in nativer JavaScript);
2. Erstellen Sie ein Array aus den Ergebnissen;
3. Optional konvertieren Sie das Array in ein konventionelles Objekt (Javascript-Arrays sind bereits Objekte); und dann
4. konvertieren entweder das herkömmliche Objekt oder das Array in JSON (die Sie dann über Ajax senden).

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

Versuchen Sie es mit einer Form zu umgeben:

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

und dann in Ihre Ajax, dies zu tun:

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

    } 
    }); 
}); 

In Ihrem views.py Sie kann ein li bekommen st der "checkbox_1" Werte mit Namen Checkbox Elemente:

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

wenn es nicht funktioniert, versuchen Sie dies:

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

Und dann, zum Beispiel:

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> 

In django Ansichten können Sie den Wert von Kontrollkästchen erhalten request.POST['checkboxes'] verwenden. Durch Anwenden der Methode split(',') auf diesen Wert werden die Werte aller Kontrollkästchen getrennt.