Ein Kontrollkästchen ist ein Auswahlfeld, das es den Benutzern ermöglicht, durch Aktivieren und Deaktivieren eine binäre Auswahl (wahr oder falsch) zu treffen. Im Grunde handelt es sich bei einem Kontrollkästchen um ein Symbol, das häufig in GUI-Formularen und -Anwendungen verwendet wird, um eine oder mehrere Eingaben vom Benutzer zu erhalten.
- Wenn ein Kontrollkästchen markiert oder aktiviert ist, bedeutet dies, dass dies der Fall ist WAHR ; Dies bedeutet, dass der Benutzer den Wert ausgewählt hat.
- Wenn ein Kontrollkästchen deaktiviert oder nicht aktiviert ist, weist dies darauf hin FALSCH ; Dies bedeutet, dass der Benutzer den Wert nicht ausgewählt hat.
Erinnere dich daran Das Kontrollkästchen unterscheidet sich vom Optionsfeld und der Dropdown-Liste, da es mehrere Auswahlmöglichkeiten gleichzeitig ermöglicht. Im Gegensatz dazu ermöglichen uns das Optionsfeld und das Dropdown-Menü, nur eine der vorgegebenen Optionen auszuwählen.
In diesem Kapitel erfahren Sie nun, wie Sie alle markierten Kontrollkästchenwerte mithilfe dieser Funktion abrufen JavaScript .
Erstellen Sie eine Checkbox-Syntax
Um ein Kontrollkästchen zu erstellen, verwenden Sie den HTML-Tab und geben Sie='checkbox' innerhalb des Tabs ein, wie unten gezeigt -
Yes
Sie können zwar auch ein Kontrollkästchen erstellen, indem Sie das Kontrollkästchenobjekt über JavaScript erstellen, diese Methode ist jedoch etwas kompliziert. Wir werden beide Ansätze später besprechen.
Beispiele
Kontrollkästchenwert erstellen und abrufen
In diesem Beispiel erstellen wir zwei Kontrollkästchen, allerdings mit der Bedingung, dass der Benutzer nur ein Kontrollkästchen dazwischen markieren muss. Dann rufen wir den Wert des markierten Kontrollkästchens ab. Siehe den Code unten:
Code kopieren
<h2>Create a checkbox and get its value</h2> <h3> Are you a web developer? </h3> Yes: No: <br> <br> Submit <br> <h4> <h4> function checkCheckbox() { var yes = document.getElementById('myCheck1'); var no = document.getElementById('myCheck2'); if (yes.checked == true && no.checked == true){ return document.getElementById('error').innerHTML = 'Please mark only one checkbox either Yes or No'; } else if (yes.checked == true){ var y = document.getElementById('myCheck1').value; return document.getElementById('result').innerHTML = y; } else if (no.checked == true){ var n = document.getElementById('myCheck2').value; return document.getElementById('result').innerHTML = n; } else { return document.getElementById('error').innerHTML = '*Please mark any of checkbox'; } } </h4></h4> Testen Sie es jetzt Ausgabe
Wenn Sie das markieren Ja Kontrollkästchen und klicken Sie dann auf Einreichen Wenn Sie auf die Schaltfläche klicken, wird eine Meldung wie unten dargestellt angezeigt:
Wenn Sie auf klicken Einreichen Klicken Sie auf die Schaltfläche, ohne eines der Kontrollkästchen zu markieren, wird eine Fehlermeldung angezeigt.
Ebenso können Sie die Ausgabe auf andere Bedingungen prüfen.
Alle Kontrollkästchenwerte abrufen
Jetzt erfahren Sie, wie Sie alle vom Benutzer markierten Kontrollkästchenwerte abrufen. Siehe das folgende Beispiel.
Code kopieren
<h2>Create a checkbox and get its value</h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> Check all <br> <br> Submit <br> <h4></h4> function checkAll() { var inputs = document.querySelectorAll('.pl'); for (var i = 0; i <inputs.length; i++) { inputs[i].checked="true;" } function getcheckboxvalue() var l1="document.getElementById('check1');" l2="document.getElementById('check2');" l3="document.getElementById('check3');" l4="document.getElementById('check4');" l5="document.getElementById('check5');" l6="document.getElementById('check6');" res=" " ; if (l1.checked="=" true){ pl1="document.getElementById('check1').value;" + ','; else (l2.checked="=" pl2="document.getElementById('check2').value;" (l3.checked="=" document.write(res); pl3="document.getElementById('check3').value;" (l4.checked="=" pl4="document.getElementById('check4').value;" (l5.checked="=" pl5="document.getElementById('check5').value;" (l6.checked="=" pl6="document.getElementById('check6').value;" pl6; return document.getelementbyid('result').innerhtml="You have not selected anything" ' languages'; < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>By executing this code, we will get a response like the below screenshot having some programming languages where you can choose the language you know.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-3.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Here, you click on the <strong>Check all</strong> button, it will mark all the programming language checkboxes. After that, click on the <strong>Submit</strong> button to get the response.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-4.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Although you can select the language one by one by marking an individual checkbox and then click on the <strong>Submit</strong> button to get the result.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-5.webp" alt="How to get all checked checkbox value in JavaScript"> <p> <strong>Output: When you have not selected anything</strong> </p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-6.webp" alt="How to get all checked checkbox value in JavaScript"> <h2>Get all marked checkboxes value using querySelectorAll() method</h2> <p>There is one more method to get all selected values from the checkboxes marked by the user. You will now see how to get the value of all checkboxes using the querySelectorAll() method marked by the user. This will fetch the checkboxes values from the HTML form and display the result.</p> <h3>Get all checkbox value</h3> <p>Now, you will see how to get all checkbox values marked by the user. See the below example.</p> <p> <strong>Copy Code</strong> </p> <pre> <h2> Get all marked checkboxes value </h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> <br> <br> Submit <br> <h4></h4> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </tr></pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>Here, you can see that all marked checkboxes value has been returned.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-7.webp" alt="How to get all checked checkbox value in JavaScript"> <h3>Different JavaScript codes to get marked checkboxes value</h3> <p>JavaScript Code to get all checked checkbox values</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </pre> <p>You can also use the below code to get all checked checkboxes values.</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } </pre> <p>So, checkbox elements allow to multi-select. This means that the users can select one or more options of their choice defined in the HTML form. Even you can select all the checkboxes. In the above example, you have already seen that.</p> <hr></inputs.length;></tr> Testen Sie es jetzt Ausgabe
Hier können Sie sehen, dass der Wert aller markierten Kontrollkästchen zurückgegeben wurde.
Verschiedene JavaScript-Codes, um den Wert markierter Kontrollkästchen zu erhalten
JavaScript-Code zum Abrufen aller aktivierten Kontrollkästchenwerte
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Sie können auch den folgenden Code verwenden, um alle aktivierten Kontrollkästchenwerte abzurufen.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Checkbox-Elemente ermöglichen also eine Mehrfachauswahl. Das bedeutet, dass der Benutzer eine oder mehrere im HTML-Formular definierte Optionen seiner Wahl auswählen kann. Sie können sogar alle Kontrollkästchen aktivieren. Im obigen Beispiel haben Sie das bereits gesehen.