I have a simple webpage with several checkboxes, representaing different choices the user can take. The user can check as many checkboxes as they like. As of now, all I need is to check, which ones of the the checkboxes have been checked by the user, and then simply log into the console the information that "checkboxes with id=xyz and with id=123 and with id=zyx have been checked". I am a total beginner and can't figure it out. I managed to do it if there's only ONE checkbox on the whole page, but not when there are several.
<input type="checkbox" class="check" id="Technik" onclick="checkFunction()" />
<label for="Technik"> Technik </label><br>
<input type="checkbox" id="Klima" onclick="checkFunction()" >
<label for="Klima"> Klima </label><br>
<input type="checkbox" id="Kultur" onclick="checkFunction()" >
<label for="Kultur"> Kultur </label><br>
<input type="checkbox" id="Landnutzung" onclick="checkFunction()" >
<label for="Landnutzung"> Landnutzung </label><br>
<input type="checkbox" id="Mikroorganismen" onclick="checkFunction()" >
<label for="Mikroorganismen"> Mikroorganismen </label><br>
<input type="checkbox" id="Pflanzen" onclick="checkFunction()" >
<label for="Pflanzen"> Pflanzen </label><br>
<script>
document.getElementById("Technik").addEventListener("click", checkFunction);
function checkFunction() {
var checkBox = document.querySelector(".check");
if (document.querySelector(".check").checked == true) {
console.log("The checkbox is checked.");
}
else {
console.log("The checkbox is NOT checked.");
}
}
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire