Una casella de selecció és una casella de selecció que permet als usuaris fer l'elecció binària (vertadera o falsa) marcant-la i desmarcant-la. Bàsicament, una casella de selecció és una icona, que s'utilitza amb freqüència en formularis i aplicacions GUI per obtenir una o més entrades de l'usuari.
- Si una casella de selecció està marcada o marcada, indica a veritat ; això significa que l'usuari ha seleccionat el valor.
- Si una casella de selecció està desmarcada o no marcada, ho indica fals ; això vol dir que l'usuari no ha seleccionat el valor.
Recorda que La casella de selecció és diferent del botó d'opció i de la llista desplegable perquè permet seleccionar múltiples alhora. En canvi, el botó d'opció i el menú desplegable ens permeten triar només una de les opcions donades.
flux de filtre java
En aquest capítol, ara veurem com utilitzar tots els valors de la casella de selecció marcats JavaScript .
Crea la sintaxi de la casella de selecció
Per crear una casella de selecció, utilitzeu la pestanya HTML i escriviu='checkbox' dins de la pestanya com es mostra a continuació:
Yes
Tot i que també podeu crear una casella de selecció creant l'objecte de la casella de selecció mitjançant JavaScript, però aquest mètode és una mica complicat. Més endavant parlarem dels dos enfocaments:
Exemples
Creeu i obteniu el valor de la casella de selecció
En aquest exemple, crearem dues caselles de selecció però amb la condició que l'usuari haurà de marcar només una casella entre elles. A continuació, recuperarem el valor de la casella de selecció marcada. Vegeu el codi a continuació:
dateformat.format java
Copia el codi
<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> Prova-ho ara Sortida
Si marqueu el Sí casella de selecció i després feu clic a Presentar botó, es mostrarà un missatge com es mostra a continuació:
Si feu clic a Presentar sense marcar cap casilla de verificació, es mostrarà un missatge d'error.
De la mateixa manera, podeu comprovar la sortida per altres condicions.
llista de religions
Obteniu tot el valor de la casella de selecció
Ara, veureu com obtenir tots els valors de caselles marcats per l'usuari. Vegeu l'exemple següent.
Copia el codi
<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> Prova-ho ara Sortida
Aquí podeu veure que s'ha retornat el valor de totes les caselles de selecció marcades.
Diferents codis JavaScript per obtenir el valor de les caselles de selecció marcades
Codi JavaScript per obtenir tots els valors de les caselles de selecció marcats
mysql crea usuari
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } També podeu utilitzar el codi següent per obtenir tots els valors de les caselles de selecció marcades.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Per tant, els elements de la casella de selecció permeten fer una selecció múltiple. Això vol dir que els usuaris poden seleccionar una o més opcions de la seva elecció definides al formulari HTML. Fins i tot podeu seleccionar totes les caselles de selecció. A l'exemple anterior, ja ho heu vist.