HTML-Kontrollkästchen-Elemente werden nur übermittelt, wenn sie markiert sind?

Question

Ich versuche, an einer bestehenden Website zu arbeiten, und habe einen Fehler gefunden, aber ich bin mir nicht sicher, warum es ein Fehler ist oder wie man ihn umgehen kann.

Die Website listet im Wesentlichen einige Gewerbeimmobilien auf, die in einer Stadt zur Vermietung stehen. Es gibt eine Klasse, die die Angebote aus der Datenbank abruft und aus jedem ein Objekt erstellt. In jedem Objekt befindet sich ein Array von Bildern, die mit dieser Eigenschaft verbunden sind.

Wenn der Benutzer einen Eintrag bearbeitet, erhält er eine Bearbeitungsseite mit einer Liste der Bilder und einem Kontrollkästchen "Löschen" neben den Bildern. Die Kontrollkästchen haben alle denselben Namen, so dass die App beim Zurücksenden an den Server ein Array der zu löschenden Bilder erhält.

Was soll passieren, ist, dass die App dieses Array von on/off-Werten hat (wobei on = delete), und der Index jedes Wertes im Array entspricht dem Index eines Bildes im Listing-Objekt -- wenn einer der Werte "on" ist, wird der Dateiname im images-Array, der diesem "on"-Wert entspricht, aus dem Dateisystem gelöscht, und das Bild wird aus der Datenbank entfernt.

Jedoch, wenn das Formular gesendet wird, erhält die App ein 0-indexiertes Array von nur die angekreuzten Kontrollkästchen. Also, wenn ich drei beliebige Bilder zum Löschen festlegen, würde die App erhalten

Array {
   \[0\] => "on",
   \[1\] => "on",
   \[2\] => "on"
}

Dies funktioniert natürlich nicht, da die ersten 3 Bilder in der Liste gelöscht werden, unabhängig davon, welche Kontrollkästchen aktiviert sind.

Wie kann ich das beheben? Ich möchte vermeiden, jedes Kontrollkästchen zu benennen ( delete_1 , delete_2 , delete_3 usw.), da das System bereits so aufgebaut ist, dass alle Kontrollkästchen denselben Namen haben. Kann ich irgendwie erzwingen, dass alle Kontrollkästchen entweder mit "on" oder "off" übermittelt werden?

Answer 1

Es gibt keine Möglichkeit, dies zu erzwingen, aber Sie könnten einfach ein verstecktes Kontrollkästchen mit demselben Namen und dem gewünschten Wert hinzufügen:

<input type="hidden" name="delete[42]" value="off" />
<input type="checkbox" name="delete[42]" value="on" />

Answer 2

Nein, Sie können nicht erzwingen, dass nicht markierte Kontrollkästchen übermittelt werden, aber Sie können ihnen eindeutige Werte geben (anstelle von "on" für alle), um zu bestimmen, welche davon markiert sind, ohne die Namen zu ändern.

Answer 3

Wenn Sie wirklich ein Array über Ein- und Ausgänge zurückgeben wollen, müssen Sie eine Funktion an das Formular anhängen, die alle Kontrollkästchen mit dem angegebenen Namen sucht und deren Werte in das Array einfügt.

In jQuery würde dies etwa so aussehen...

$('#yourForm').submit(function(){
    var array = new Array();
    $('input[name="nameOfCheckboxes"]').each(function(index){
        array[index] = $(this).value();
    }
    var r = $.param(array);
    $('#someHiddenFieldInForm').value(r);
 }

(der Code ist natürlich ungetestet)

Answer 4

Sie können dieses Problem lösen, indem Sie das folgende jQuery hinzufügen:

$(function () {
  $("#myform").submit(function(){
    $("input[name='delete']:not(:checked)").attr("checked","checked").val("off");  
  });
}); 

myform ist die ID Ihres Formulars und delete ist der Name der Kontrollkästchen.

Answer 5

Die Lösung von Fred Nurk ist gut und ich habe sie hochgestuft. Ich persönlich habe in dieser Situation den Feldern immer unterschiedliche Namen gegeben. Ich verwende ein allgemeines Präfix, gefolgt von einem Unterstrich, damit es leicht zu erkennen ist, und dann eine Art von ID. Oft erstelle ich eine Reihe von Feldern, die alle das gleiche Muster haben, z. B. "name_1", "amount_1", "foobar_1", "name_2", "amount_2", usw. Es ist recht einfach, eine Schleife durch die Felder zu ziehen und diese Namen zu zerlegen. (In Java einfach indexOf('_').)