Hallo,
ich bin js Anfänger und bin dabei aus Spaß an der Freude ein paar erste Gehversuche mit js zu unternehmen. Meine Lernart ist die des zusammen suchen, ausprobieren, anpassen und bei Notwendigkeit zu ergründen wie man da weiter kommt und warum es hakt.
Folgendes Bsp. funktioniert und kann per Checkboxen einzeln auswählen oder mit einer Checkbox alles auswählen und den Inhalt der Arays zusammen ausgeben:
Was mir bisher nicht gelingt, ist etwas wie obiges, mehrfach innerhalb einer html Seite zu verwenden. In folgendem Bsp. versuche ich so etwas zweimal durchzuführen.
ich bin js Anfänger und bin dabei aus Spaß an der Freude ein paar erste Gehversuche mit js zu unternehmen. Meine Lernart ist die des zusammen suchen, ausprobieren, anpassen und bei Notwendigkeit zu ergründen wie man da weiter kommt und warum es hakt.
Folgendes Bsp. funktioniert und kann per Checkboxen einzeln auswählen oder mit einer Checkbox alles auswählen und den Inhalt der Arays zusammen ausgeben:
Code:
<!doctype html>
<html>
<body>
<!-- Formularbereich -->
<input type="checkbox" id="selectAll1" /> Alle auswählen
<br />
<input type="checkbox" class="arrayCheckbox1" value="Array 11" /> Array 11, Hund", "Katze", "Pferd
<br />
<input type="checkbox" class="arrayCheckbox1" value="Array 12" /> Array 12, Schaf", "Ziege", "Kamel
<br />
<div id="result1"></div>
<br />
<br />
</body>
<!-- Einbindung von JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Belegung von Arrays mit Werten -->
<script>
const array11 = ["Hund", "Katze", "Pferd"];
const array12 = ["Schaf", "Ziege", "Kamel"];
const arrays1 = {
"Array 11": array11,
"Array 12": array12,
};
function updateResult() {
const selectedArrays = [];
$(".arrayCheckbox1:checked").each(function () {
selectedArrays.push(...arrays1[$(this).val()]);
});
$("#result1").html(selectedArrays.join(", "));
}
$(".arrayCheckbox1").on("change", function () {
updateResult();
});
$("#selectAll1").on("change", function () {
const isChecked = $(this).is(":checked");
$(".arrayCheckbox1").prop("checked", isChecked);
updateResult();
});
</script>
</html>
Was mir bisher nicht gelingt, ist etwas wie obiges, mehrfach innerhalb einer html Seite zu verwenden. In folgendem Bsp. versuche ich so etwas zweimal durchzuführen.