Javascript: Checkboxen abhaken --> Was wird im Code genau gemacht?

[Logithan]

Hallo zusammen,

ich bin Anfänger und am Lernen. Aktuelle verstehe ich diesen Abschnitt des Codes nicht.
Ich würde gerne aber genau verstehen, was und wieso das Ganze so gemacht wurden ist.

Vielen Dank im Voraus.

<script>
    
    var tasks = document.querySelector("div.tasks");
        if (tasks != null) {
    
            var checkboxes = tasks.children;
            
            for(var checkboxDiv of checkboxes) {
                
                
               var checkbox = checkboxDiv.children[0];
               checkbox.addEventListener('change', function() {
                   fetch('TaskStatusAenderungServlet?task=' + this.id + '&completed=' + this.checked, {method: 'POST'});             
               });
            }
        }
        
    </script>

 

[Sempervivum]

Einfacher wäre es, wenn man auch das HTML hätte, aber das kann man sich zusammen reimen:

<div class="tasks">
    <div><input type="checkbox"></div>
    <div><input type="checkbox"></div>
    <div><input type="checkbox"></div>
    <-- eine beliebige Anzahl von Divs mit Checkboxes darin -->
</div>

    // Das äußere Div mit der Klasse "tasks" bereit stellen:
    var tasks = document.querySelector("div.tasks");
        // Prüfen ob das Div ermittelt werden konnte:
        if (tasks != null) {
            // Alle Kindelemente dieses Div ermitteln:
            var checkboxes = tasks.children;
            // Schleife über diese Kindelemente (Divs):       
            for(var checkboxDiv of checkboxes) {
                // checkboxDiv ist jetzt das aktuelle Div
                // darin das erste Kindelement ermitteln,
                // dabei muss es sich um eine Checkbox handeln:              
                var checkbox = checkboxDiv.children[0];
                // Für diese Checkbox einen Eventlistener registrieren,
                // die anonyme Funktion wird aufgerufen, wenn sich
                // der Zustand der Checkbox ändert:
                checkbox.addEventListener('change', function() {
                   // this enthält das Checkbox-Element
                   // Anforderung an der Server schicken mit folgenden Parametern in der URL:
                   // 1. Die ID der Checkbox unter dem Namen "task"
                   // 2. Der Zustand der Checkbox unter dem Namen "completed"
                   fetch('TaskStatusAenderungServlet?task=' + this.id + '&completed=' + this.checked, {method: 'POST'});           
               });
            }
        }

 

[Sempervivum]

PS: Mir kam das komisch vor, daher habe ich es getestet: Parameter in der URL werden als GET-Parameter übertragen, daran ändert auch die Option method: 'POST' nichts, sie ist irreführend und hat auf die Parameter in der URL keine Auswirkung.