mercredi 19 mai 2021

Among multiple checkboxes, check which ones have been checked by user

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