JS Array an Input (Checkbox) Array übergeben.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

sveka

Mitglied
26 Mai 2006
175
1
18
34
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

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

Senior HTML'ler
26 November 2017
1.684
177
63
Minden
basti1012.de
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
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Ich verstehe das so, dass Du, @sveka, alle Checkboxen aktivieren willst, wo das value-Attribut in dem Array ist?
In dem Fall ermittle die Nodelist und iteriere darüber so wie in dem zweiten Beispiel mit for-of hier:
Und prüfe mit der Funktion includes ob das aktuelle value-Attribut in dem Array enthalten ist:
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Danke erstmal für das Feedback. so ganz verstehe ich das mit der NodeList etc. noch nicht.

Ich habe aktuell folgendes.

Das Ausgangselement "Checkbox"

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

Javascript:
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 ...

Javascript:
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!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
Wie ich sehe, arbeitest Du mit jQuery. Ich bin da schon ein wenig heraus aber ich erinnere mich, dass, wenn Du ein Element indizierst, wie Du es tust, das Ergebnis kein jQuery-Objekt mehr ist sondern ein DOM-Element. Bei jQuery am besten mit each arbeiten:
Code:
$('input[name="region[]"]').each(function(idx, item) {
    console.log($(item).val());
    $(item).prop('checked', true)
});
Alles ungetestet, wie geschrieben bin ich nicht mehr so drin in jQuery.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.490
475
83
68
PS: Ganz vergessen: Mit Vanilla-JS ist es auch recht einfach:
Code:
    <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.
 

basti1012

Senior HTML'ler
26 November 2017
1.684
177
63
Minden
basti1012.de
Wegen das hier
Code:
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().
Code:
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

Mitglied
26 Mai 2006
175
1
18
34
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

Aktives Mitglied
2 September 2020
133
28
28
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

Mitglied
26 Mai 2006
175
1
18
34
PS: Ganz vergessen: Mit Vanilla-JS ist es auch recht einfach:
Code:
    <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.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Habe es mittlerweile ausprobiert. Habe mich für den Vanilla-JS Ansatz entschieden. Es klappt super. Danke.
 
Werbung: