JS Array an Input (Checkbox) Array übergeben.

[sveka]

Hallo,

ich habe eine Frage.

Ich habe ein JavaScript Array mit verschiedenen Werten.

Diese Werte finden sich in einem HTML-Checkbox-Array wieder.

Also nach dem Schema

<input type="checkbox" name="region[]" value="Köln">
<input type="checkbox" name="region[]" value="München">

Diese Orte tauchen nun im JS-Array wieder auf.

Wie durchlaufe ich das nun am besten das JS-Array und wenn die Werte oben dabei sind, soll gechecked werden.

Vielen Dank für eure Unterstützung.

 

[basti1012]

Wie sieht das Array den aus?
Du möchtest jetzt das Array in einer Schleife durchgehen und in jeder Checkbox den Namen eintragen oder wie.
Ohne den Inhalt des Arrays zu kennen, kann ich nur raten mit der Beschreibung

 

[sveka]

Danke erstmal für das Feedback. so ganz verstehe ich das mit der NodeList etc. noch nicht.

Ich habe aktuell folgendes.

Das Ausgangselement "Checkbox"

echo "<input type='checkbox' class='form-check-input' name='region[]' id='region' value='".$ort['Region']."'>&nbsp; ".$ort['Region']." &nbsp;";

Nun hole ich mir per AJAX die aktuellen Daten aus der DB und habe im JavaScript die vorhandenen Regionen in einem Array. Wie folgt erzeugt:

var regionen = data.ID_Regionen.split(", ");

Nun möchte ich quasi alle o.g. Checkboxen durchlaufen und da wo das Value auch im Array existiert möchte ich die Box "checked" setzen.

Ich habe schon herausgefunden wie ich die Anzahl der Checkboxen zählen kann. Wollte damit in einer for-Schleife durchlaufen. Aber da habe ich es nicht hinbekommen auf das Value zuzugreifen.

Dies hatte ich wie folgt versucht ...

var anz_region = $('input[name="region[]"]').length;
console.log(anz_region);

for(r = 0 ; r < anz_region ; r++)
{
console.log($('input[name="region[]"]')[r].val());
                
}

Es gelingt mir aber nicht auf das Value zuzugreifen. Weder mit val() noch mit prop().

Ich hoffe ihr könnt mir weiterhelfen. Vielleicht kann mir das mit der NodeList jemand erklären? JavaScript ist einfach nicht mein Ding. Obwohl ich langsam dahinterkomme und mir auch vorgenommen habe es öfter einzusetzen.

Vielen lieben Dank!

 

[basti1012]

Wegen das hier

var anz_region = $('input[name="region[]"]').length;
console.log(anz_region);
for(r = 0 ; r < anz_region ; r++){
console.log($('input[name="region[]"]')[r].val());             
}

Bei JQuery gibt es dafür das eq().

var anz_region = $('input[name="region[]"]').length;
console.log(anz_region);

for(r = 0 ; r < anz_region ; r++){
     console.log($('input[name="region[]"]').eq(r).val());
}

Sinnvoller ist aber die each() Methode aus #5

 

[sveka]

Vielen lieben Dank. Ich werde es später probieren. :)

Darf ich fragen was der "große" Unterschied zwischen JQuery und Vanilla-JS ist? Wie gesagt, JS ist nicht ganz mein Fall^^

 

[tk1234]

Darf ich fragen was der "große" Unterschied zwischen JQuery und Vanilla-JS ist?

jQuery ein in Javascript geschriebenen Bibliothek z.B. für den Zugriff und die Manipulation von Elementen, mit Vanilla-JS ist einfach nur normales Javascript gemeint, es sind keine weiteren JS-Dateien notwendig. Vanilla-JS ist heute völlig ausreichend, das wofür jQuery früher notwendig war lässt sich heute auch direkt und ohne (nennenswert) größeren Aufwand mit Javascript lösen.

 

[sveka]

Achso. Ok. Danke. :)

 

[sveka]

PS: Ganz vergessen: Mit Vanilla-JS ist es auch recht einfach:

    <input type="checkbox" name="region[]" value="Köln">
    <input type="checkbox" name="region[]" value="München">
    <input type="checkbox" name="region[]" value="Hannover">
    <input type="checkbox" name="region[]" value="Hamburg">
    <script>
        const regionen = ['Köln', 'Hannover'];
        const rbRegion = document.querySelectorAll('input[name = "region[]"]');
        rbRegion.forEach(item => {
            console.log(item.value);
            if (regionen.includes(item.value)) {
                item.checked = true;
            }
        });
    </script>

Dies ist getestet und funktioniert.

Ich habe mich hierfür entschieden. Klappt super toll und macht was es soll. Danke nochmal.

 

[basti1012]

Hier kannst du mal sehen wie jQuery Code in Normalen Vanilla Code ausgeführt wird

https://youmightnotneedjquery.com/

In 3-4 Fällen hat JQuery einen kürzeren Code , doch bei den anderen ist das fast der gleiche Aufwand.

 

[sveka]

Hier kannst du mal sehen wie jQuery Code in Normalen Vanilla Code ausgeführt wird

https://youmightnotneedjquery.com/

In 3-4 Fällen hat JQuery einen kürzeren Code , doch bei den anderen ist das fast der gleiche Aufwand.

Danke.

 

[sveka]

Habe es mittlerweile ausprobiert. Habe mich für den Vanilla-JS Ansatz entschieden. Es klappt super. Danke.