Code zum Markieren von Checkboxen, die sich geändert haben

Question

Die tl: dr-Version dieser Frage ist einfach. Ich habe eine Reihe von Kontrollkästchen und möchte diejenigen, die den Status aktiviert haben, als nicht markiert markieren, nicht markiert, um sie zu aktivieren. Unten ist mein Versuch, das zu lösen. Wir verwenden jQuery nicht nur JavaScript.

Ich habe eine Anwendung, die eine Tabelle anzeigt, die eine Liste von Elementen aus dem DB zeigt, die entweder aktiv oder inaktiv sind. Der aktive Status wird mit einem Kontrollkästchen angezeigt, das aktiviert ist, wenn das Element aktiv ist, und deaktiviert, wenn es inaktiv ist.

Ein Benutzer der Anwendung wird dann Änderungen vornehmen, markierte Kontrollkästchen deaktivieren und nicht markierte Kontrollkästchen aktivieren, um den Status der Elemente zu ändern, was er will, und dann eine Aktualisierungsschaltfläche drücken, um diese Änderungen in der DB zu speichern.

Ich entschied, dass es hilfreich wäre, dem Benutzer anzuzeigen, welche Elemente er geändert hatte.

Also habe ich jedes Kontrollkästchen innerhalb eines div platziert, das eine Funktion ausführt, die den Zellhintergrund in eine andere Farbe ändert, um jene Elemente zu markieren, die sich von dem geändert haben, was sie ursprünglich waren. Das war in Ordnung, wenn sie direkt auf das Kontrollkästchen treffen, ändern sich sowohl die Farbe als auch der Prüfstatus wie erwartet, aber wenn Sie außerhalb des Feldes klicken, aber immer noch in der Tabellenzelle, ändert sich die Farbe, aber nicht der Prüfstatus.

Also, ich habe einen Code hinzugefügt, um die Farbe zu ändern, um es auch das Kontrollkästchen zu aktivieren. Dies funktioniert gut, wenn sie außerhalb des Kontrollkästchens klicken, aber immer noch in der Zelle. Wenn sie jedoch direkt auf das Kontrollkästchen klicken, wird sowohl die Farbänderungsfunktion ausgeführt, die den Boxstatus und die Farbe ändert, als auch die Standardstatusänderung für das Anklicken eines Kontrollkästchens. Dies führt dazu, dass der Prüfstatus in den ursprünglichen Status zurückkehrt.

Die Frage ist, wie kann ich nur den einen oder anderen zum Laufen bekommen? Gibt es einen Standardweg, um den ich mir nicht bewusst bin? Vielleicht sollte ich kein Kontrollkästchen verwenden?

Dank im Voraus

Unten finden Sie die Funktion:

function toggleCheckboxBackground(clickedItem){ 
    if(clickedItem.style.background == 'red'){ 
     clickedItem.style.background = ''; 
    } else { 
     clickedItem.style.background = 'red'; 
    } 
    var cboxes = clickedItem.getElementsByTagName('input'); 
    if(cboxes[0].type === 'checkbox'){ 
     if(cboxes[0].checked){ 
      cboxes[0].checked = false; 
     } 
     else { 
      cboxes[0].checked = true; 
      } 
    } 

} 

Answer 1

Was ich in JS Frameworks gesehen haben sie unberührt Kontrollen durch Benutzer als unberührte markieren. Wenn der Benutzer also nicht mit der Checkbox interagiert hat, könnte er ein "unberührtes" Attribut haben. Wenn der Benutzer den Status des Kontrollkästchens ändert, entfernen Sie das Attribut "makellos".

Wenn der Benutzer mehrmals klickt: Ich würde Attribut mit Anfangszustand "initial-checked" oder "initial-unchecked" hinzufügen und es dann basierend auf diesem Attribut zurückstellen.

Answer 2

Ich bin nicht sicher, was Sie genau tun wollen, aber wenn Sie den Überblick über geänderte Kontrollkästchen halten möchten, können Sie es wie folgt tun:

for(var i = 0; i < checkboxes.length; i++){ 
    checkboxes[i].addEventListener("mousedown", function(){ 
    console.log(this.checked); 
    }); 
} 

Dann können Sie sie speichern und tun, was mit die geänderten Boxen.

https://jsfiddle.net/hspveapu/