Obtenga el valor de la casilla de verificación marcada en JavaScript
- Inspeccionar si una casilla de verificación está marcada en JavaScript
-
Obteniendo los valores de la
checkbox -
Obtener valores de múltiples casillas de verificación seleccionadas usando
querySelectorAll()en JavaScript -
Obtener el valor de varias casillas de verificación seleccionadas mediante el método
getElementById()en JavaScript
Este artículo lo ayudará a usar JavaScript para verificar si una checkbox está marcada, obtener los valores de las casillas de verificación marcadas y seleccionar/deseleccionar todas las casillas de verificación.
Inspeccionar si una casilla de verificación está marcada en JavaScript
Hay dos estados para la casilla de verificación: marcada y sin marcar.
Puede seguir estos procedimientos para determinar la condición de una casilla de verificación.
- Para comenzar, use una técnica
DOMcomogetElementById()oquerySelector()para seleccionar la casilla de verificación. - Luego, acceda a la propiedad marcada del elemento de la casilla de verificación. La casilla de verificación está marcada si su propiedad marcada es real; de lo contrario, no lo es.
El siguiente código muestra esto con el método querySelector().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
En este ejemplo,
Primero puede crear un elemento de casilla de verificación Html.
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
En segundo lugar, examine el atributo marcado de la casilla de verificación con el id #submit.
const js = document.querySelector('#submit');
console.log(js.checked);
El resultado que se muestra en la consola será false ya que la casilla de verificación no está marcada.
false
Si la casilla de verificación está marcada, se mostrará true en la consola.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
Verá Output como true en la consola.
true
Obteniendo los valores de la checkbox
Una checkbox y un button se pueden encontrar en la página siguiente. El valor de la casilla de verificación se mostrará en la ventana de la consola cuando haga clic en el botón:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="payment">
<input type="checkbox" id="payment" name="payment"> Payment
</label>
<button id="bt">Submit</button>
<script>
const js = document.querySelector('#payment');
const bt = document.querySelector('#bt');
bt.onclick = () => {
alert(js.value);
};
</script>
</body>
</html>
Ya sea que la casilla de verificación esté seleccionada o no, siempre obtiene la cadena on cuando obtiene la propiedad de valor de una casilla de verificación.
Obtener valores de múltiples casillas de verificación seleccionadas usando querySelectorAll() en JavaScript
Tres casillas de verificación se pueden encontrar en la página siguiente. Cuando selecciona una o más casillas de verificación y presiona el botón, se mostrarán los valores de las casillas de verificación seleccionadas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite subject:</p>
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
<p>
<button id="bt">Get Selected subject</button>
</p>
<script>
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
</script>
</body>
</html>
A continuación se muestra cómo funciona.
Creamos tres elementos de casilla de verificación en HTML con el mismo nombre (color) pero valores diferentes.
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
En JavaScript:
- Para comenzar, agregue lo siguiente al controlador de eventos de clic del botón:
- En segundo lugar, utilice el documento para seleccionar las casillas de verificación especificadas. Dentro del controlador de eventos de clic, use el método querySelectorAll():
- Tercero, crea un array con los valores de las casillas de verificación seleccionadas:
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
Obtener el valor de varias casillas de verificación seleccionadas mediante el método getElementById() en JavaScript
Ahora aprenderá cómo obtener todos los valores de las casillas de verificación del usuario utilizando el método getElementById(). Eche un vistazo al ejemplo a continuación.
<html>
<body>
<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
document.write(result);
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result").innerHTML = "please,select any one";
}
return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>
</body>
</html>
Producción:
Al ejecutar este código, obtendremos una respuesta similar a la siguiente, donde puede seleccionar los temas con los que está familiarizado.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn