Una casilla de verificación es una casilla de selección que permite a los usuarios realizar una elección binaria (verdadero o falso) marcándola y desmarcándola. Básicamente, una casilla de verificación es un ícono que se usa con frecuencia en formularios y aplicaciones GUI para obtener una o más entradas del usuario.
- Si una casilla de verificación está marcada o marcada, indica que verdadero ; esto significa que el usuario ha seleccionado el valor.
- Si una casilla de verificación no está marcada o no está marcada, indica FALSO ; esto significa que el usuario no ha seleccionado el valor.
Recuerda eso La casilla de verificación es diferente del botón de opción y la lista desplegable porque permite múltiples selecciones a la vez. Por el contrario, el botón de opción y el menú desplegable nos permiten elegir solo una de las opciones dadas.
En este capítulo, ahora veremos cómo obtener todos los valores de las casillas de verificación marcadas usando javascript .
Crear sintaxis de casilla de verificación
Para crear una casilla de verificación, use la pestaña HTML y escriba = 'casilla de verificación' dentro de la pestaña como se muestra a continuación:
reiniciar mysql ubuntu
Yes
Aunque también puede crear una casilla de verificación creando el objeto de casilla de verificación a través de JavaScript, este método es un poco complicado. Discutiremos ambos enfoques más adelante.
Ejemplos
Crear y obtener valor de casilla de verificación
En este ejemplo crearemos dos casillas de verificación pero con la condición de que el usuario deberá marcar solo una casilla de verificación entre ellas. Luego buscaremos el valor de la casilla marcada. Vea el código a continuación:
Copiar código
comprobar la versión de java en linux
<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> Pruébalo ahora Producción
Si marcas el Sí casilla de verificación y luego haga clic en el Entregar , aparecerá un mensaje como se muestra a continuación:
Si haces clic en el Entregar sin marcar ninguna de las casillas de verificación, se mostrará un mensaje de error.
De manera similar, puede verificar la salida para otras condiciones.
cómo emparejar auriculares beats
Obtener todos los valores de las casillas de verificación
Ahora verá cómo obtener todos los valores de las casillas de verificación marcados por el usuario. Vea el siguiente ejemplo.
Copiar código
<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> Pruébalo ahora Producción
analizar cadena a int
Aquí puede ver que se han devuelto todos los valores de las casillas de verificación marcadas.
Diferentes códigos JavaScript para obtener el valor de las casillas de verificación marcadas
Código JavaScript para obtener todos los valores de las casillas marcadas
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } También puede utilizar el siguiente código para obtener todos los valores de las casillas marcadas.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Entonces, los elementos de las casillas de verificación permiten realizar selecciones múltiples. Esto significa que los usuarios pueden seleccionar una o más opciones de su elección definidas en el formulario HTML. Incluso puedes seleccionar todas las casillas de verificación. En el ejemplo anterior, ya lo has visto.