Blog de programación, errores, soluciones
Obtener los valores de un checkbox múltiple con javascript
Obtener los valores de un checkbox múltiple en JavaScript no presenta una gran dificultad, pero es posible que te enredes al intentar hacer esto.
Veamos como sería normalmente sin JavaScript primero. Para esta ocasión usaré PHP.
index.html<body> <form method="POST" action="proccess.php"> <input type="checkbox" name="id[]" value="1" /> <input type="checkbox" name="id[]" value="2" /> <input type="checkbox" name="id[]" value="3" /> <input type="checkbox" name="id[]" value="4" /> <input type="checkbox" name="id[]" value="5" /> <input type="checkbox" name="id[]" value="6" /> <input type="submit" /> </form> </body>proccess.php
<?php var_dump($_POST["id"]);
array(2) { [0]=> string(1) "2" [1]=> string(1) "4" }
Ahora te puedes estar preguntando por qué necesitaría sacar estos valores con JavaScript, bueno, eso se debe a que puede querer solo cambiar una sola parte de la página. Por ejemplo, un carrito de compras. En donde queremos poder sacar múltiples productos de este.
Veamos como hariamos esto en javascript: en este caso utilizaré ajax de jQuery porque no quiero dejar incompleto el ejemplo.
index.html<body>
<form method="POST" action="proccess.php">
<input type="checkbox" name="id[]" value="1" />
<input type="checkbox" name="id[]" value="2" />
<input type="checkbox" name="id[]" value="3" />
<input type="checkbox" name="id[]" value="4" />
<input type="checkbox" name="id[]" value="5" />
<input type="checkbox" name="id[]" value="6" />
<input type="submit" />
</form>
<button onclick="a();">Boton</button>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"> </script>
<script>
function a(){
var ids = document.querySelectorAll("input[name='id[]']:checked");
var a=[];
for (var i=0; i<ids.length; i++) {
a[i] = ids[i].value;
}
$.ajax({
method: "POST",
url: "proccess.php",
data: { ids: a }
})
.done(function( msg ) {
alert( "Data: " + msg );
});
}
</script>
</body>
En este ejemplo la parte que más nos importa es
var ids = document.querySelectorAll("input[name='id[]']:checked");
La cual le está diciendo que obtenga todos los checkbox que estén chequeados (✅)
si yo corro en consola esta línea de código obtendré algo parecido a esto:
Nodelist(3)[input,input,input]Esto es un array con todos los elementos seleccionados, y lo que queremos es un array con los valores por eso utilizamos un array a[] el cual será rellendo con los valores de value de cada input.
proccess.php<?php
$a = implode(",",$_POST["ids"]);
echo $a;
(alert)Data: 2,4,6
