js, Verwendung von Checkboxen. Bitte um Scriptcheck

E

Elbro

New member
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:
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.
 
Mein nicht funktionierender Versuch, zwei voneinander unabhängige Blöcke mit Checkboxen und mit je einer eigenen Ausgabe um zu setzen sieht wie folgt aus, funktioniert jedoch nicht. Wie müsste man so etwas machen?

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 />
<input type="checkbox" id="selectAll2" /> Alle auswählen
<br />
<input type="checkbox" class="arrayCheckbox2" value="Array 21" /> Array 21, Huhn", "Spatz", "Elster
<br />
<input type="checkbox" class="arrayCheckbox2" value="Array 22" /> Array 22, Schaf", "Ziege", "Kamel
<br />
<div id="result2"></div>



    </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 array21 = ["Huhn", "Spatz", "Elster"];
  const array22 = ["Uhu", "Adler", "Falke"];

  const arrays1 = {
    "Array 11": array11,
    "Array 12": array12,
  };

  const arrays2 = {
    "Array 21": array21,
    "Array 22": array22,
  };


  function updateResult() {
    const selectedArrays = [];
    $(".arrayCheckbox1:checked").each(function () {
      selectedArrays.push(...arrays1[$(this).val()]);
    });
    $("#result1").html(selectedArrays.join(", "));
  }

  function updateResult() {
    const selectedArrays = [];
    $(".arrayCheckbox2:checked").each(function () {
      selectedArrays.push(...arrays1[$(this).val()]);
    });
    $("#result2").html(selectedArrays.join(", "));
  }

  $(".arrayCheckbox1").on("change", function () {
    updateResult();
  });

  $(".arrayCheckbox2").on("change", function () {
    updateResult();
  });

  $("#selectAll1").on("change", function () {
    const isChecked = $(this).is(":checked");
    $(".arrayCheckbox1").prop("checked", isChecked);
    updateResult();
  });

  $("#selectAll2").on("change", function () {
    const isChecked = $(this).is(":checked");
    $(".arrayCheckbox2").prop("checked", isChecked);
    updateResult();
  });

</script>

 
</html>
 
Andreas-B schrieb:
Du definierst die Funktion updateResult zwei mal.
So überschreibt die zweite Definition die erste.
Zum Vergrößern anklicken....
Ok. Ich nehme also einmal das folgende Codestück heraus:
function updateResult() {
const selectedArrays = [];
$(".arrayCheckbox2:checked").each(function () {
selectedArrays.push(...arrays1[$(this).val()]);
});
$("#result2").html(selectedArrays.join(", "));
}

Aber wie kann ich das verbliebene gleiche Codestück (Funktion) für beide Checkkboxblöcke verwenden ? Ich kenne die Syntax nicht wie man so etwas macht.

Ich habe dann folgendes:

<!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 />
<input type="checkbox" id="selectAll2" /> Alle auswählen
<br />
<input type="checkbox" class="arrayCheckbox2" value="Array 21" /> Array 21, Huhn", "Spatz", "Elster
<br />
<input type="checkbox" class="arrayCheckbox2" value="Array 22" /> Array 22, Schaf", "Ziege", "Kamel
<br />
<div id="result2"></div>



</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 array21 = ["Huhn", "Spatz", "Elster"];
const array22 = ["Uhu", "Adler", "Falke"];

const arrays1 = {
"Array 11": array11,
"Array 12": array12,
};

const arrays2 = {
"Array 21": array21,
"Array 22": array22,
};


function updateResult() {
const selectedArrays = [];
$(".arrayCheckbox1:checked").each(function () {
selectedArrays.push(...arrays1[$(this).val()]);
});
$("#result1").html(selectedArrays.join(", "));
}

$(".arrayCheckbox1").on("change", function () {
updateResult();
});

$(".arrayCheckbox2").on("change", function () {
updateResult();
});

$("#selectAll1").on("change", function () {
const isChecked = $(this).is(":checked");
$(".arrayCheckbox1").prop("checked", isChecked);
updateResult();
});

$("#selectAll2").on("change", function () {
const isChecked = $(this).is(":checked");
$(".arrayCheckbox2").prop("checked", isChecked);
updateResult();
});

</script>


</html>
 
jetzt hast du die Funktion komplett entfernt und überprüfst somit nicht mehr ob die Checkboxen mit der Klasse arrayCheckbox2 gecheckt sind.
Du kannst entweder in deiner updateResult Funktion beide Gruppen checken oder die zweite Funktion mit einem anderen Namen wieder einfügen, die du dann in deinem $(".arrayCheckbox2").on Handler aufrufst.

PS:
Die Script-Tags gehören in den Body-Tag. (Der Browser kann das zwar fixen, du solltest es aber trotzdem auf sowas achten.)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben