Une case à cocher est une case de sélection qui permet aux utilisateurs de faire le choix binaire (vrai ou faux) en la cochant et en la décochant. Fondamentalement, une case à cocher est une icône fréquemment utilisée dans les formulaires et les applications GUI pour obtenir une ou plusieurs entrées de l'utilisateur.
- Si une case est cochée ou cochée, cela indique à vrai ; cela signifie que l'utilisateur a sélectionné la valeur.
- Si une case n'est pas cochée ou n'est pas cochée, cela indique FAUX ; cela signifie que l'utilisateur n'a pas sélectionné la valeur.
Rappelez-vous que La case à cocher est différente du bouton radio et de la liste déroulante car elle permet plusieurs sélections à la fois. En revanche, le bouton radio et la liste déroulante nous permettent de n'en choisir qu'une parmi les options proposées.
Dans ce chapitre, nous allons maintenant voir comment obtenir toutes les valeurs des cases cochées en utilisant Javascript .
Créer une syntaxe de case à cocher
Pour créer une case à cocher, utilisez l'onglet HTML et tapez='checkbox' à l'intérieur de l'onglet comme indiqué ci-dessous -
Yes
Bien que vous puissiez également créer une case à cocher en créant l'objet case à cocher via JavaScript, cette méthode est un peu compliquée. Nous discuterons des deux approches plus tard.
Exemples
Créer et obtenir la valeur de la case à cocher
Dans cet exemple, nous allons créer deux cases à cocher mais à la condition que l'utilisateur ne devra cocher qu'une seule case entre elles. Ensuite, nous récupérerons la valeur de la case cochée. Voir le code ci-dessous :
Copier le code
<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> Testez-le maintenant Sortir
Si vous marquez le Oui case à cocher puis cliquez sur le Soumettre bouton, un message s'affichera comme indiqué ci-dessous :
Si vous cliquez sur le Soumettre sans cocher aucune des cases, un message d’erreur s’affichera.
De même, vous pouvez vérifier la sortie pour d’autres conditions.
Obtenir toutes les valeurs des cases à cocher
Maintenant, vous allez voir comment obtenir toutes les valeurs de case à cocher marquées par l'utilisateur. Voir l'exemple ci-dessous.
Copier le code
<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> Testez-le maintenant Sortir
Ici, vous pouvez voir que la valeur de toutes les cases cochées a été renvoyée.
Différents codes JavaScript pour obtenir la valeur des cases à cocher
Code JavaScript pour obtenir toutes les valeurs des cases cochées
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Vous pouvez également utiliser le code ci-dessous pour obtenir toutes les valeurs des cases cochées.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Ainsi, les éléments de case à cocher permettent une sélection multiple. Cela signifie que les utilisateurs peuvent sélectionner une ou plusieurs options de leur choix définies dans le formulaire HTML. Même vous pouvez cocher toutes les cases. Dans l’exemple ci-dessus, vous l’avez déjà vu.
clavier page suivante