Procesar múltiple CheckBox seleccionados con PHP. En este artículo veremos cómo interactuar con CheckBox seleccionados por el usuario. Para realizar este proceso nos apoyaremos en el lenguaje PHP y en el ciclo foreach.
Procesar múltiple CheckBox seleccionados con PHP
A continuación, veremos una serie de pasos para lograr nuestro objetivo.
¿Cómo funciona este código?
- Su uso básicamente es trabajar y procesar solo con los CheckBox marcados dentro de una lista de casillas de verificación.
- Primeramente, nuestro ejemplo se apoyará en una condicional y la función
ISSETpara enviar el formulario. - Nuestro segundo punto es validar si algún checkBox ha sido marcado. Por lo tanto, nos apoyaremos en una condicional y la función
EMPTYpara corroborar si las casillas están marcadas o no. - Posteriormente usaremos un variable PHP para generar un contador de casillas marcadas llamado
$checked_contador, aquí en ejemplo:
$checked_contador = count($_POST['check_lista']);
¿Cómo enviar un CheckBox por formulario HTML y PHP?
Si bien para enviar un input tipo radio por un formulario es muy sencillo, solo debemos de colocar los inputs con el mismo nombre dentro de su atributo name.
Ahora en el tema de CheckBox es muy diferente, su arquitectura permite seleccionar varios CheckBox. Por lo tanto, ahí viene el problema. A continuación, veremos dos ejemplos para procesar casillas (CheckBox).
a) Para obtener el valor de una casilla de verificación activada:
<form action="#" method="post">
<input type="checkbox" name="genero" value="Hombre">Hombre</input>
<input type="checkbox" name="genero" value="Mujer">Mujer</input>
<input type="submit" name="submit" value="Enviar Informacion"/>
</form>
<?php
// COndicional para validad el genero
if (isset($_POST['genero'])){
echo $_POST['genero']; // Muestra el CheckBox marcado.
}
?>
b) Mediante el uso de ARRAY para procesar CheckBox
Para obtener el valor de varias casillas de verificación comprobadas, atributo name en HTML la etiqueta input type=”checkbox” debe inicializarse con una matriz, es decir usando Corchetes [] al final del atributo name. Veamos un ejemplo:
Código HTML5
<form action="#" method="post"> <input type="checkbox" name="genero[]" value="Hombre"><label>Hombre</label><br/> <input type="checkbox" name="genero[]" value="Mujer"><label>Mujer</label><br/> <input type="submit" name="submit" value="Enviar"/> </form>
PHP para el proceso de la casilla de verificación usando ARRAY
<?php
if(isset($_POST['submit'])){//Validacion de envio de formulario
if(!empty($_POST['genero'])){
// Ciclo para mostrar las casillas checked checkbox.
foreach($_POST['genero'] as $selected){
echo $selected."</br>";// Imprime resultados
}
}
}
?>
En el ejemplo superior, existe un formulario que contiene algunas casillas de verificación, el usuario marca las casillas preferidas y presiona el botón Enviar, se mostrarán varios valores seleccionados de las casillas de verificación.
Cuando el usuario selecciona algunas casillas y presiona el botón con nombre «Enviar Información«.
COMPONENTES DEL SISTEMA PROCESAR MULTIPLE CHECKBOX
A continuación, se indican los códigos HTML y PHP completos de nuestro ejemplo.
a) Códigos HTML: index.php
Fichero en el cual esta almacenando nuestro formulario que contiene las casillas de verificación que serán utilizados en este ejemplo.
Por lo tanto, les dejare el código HTML5 completo.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Obtener valores de multiples CheckBox seleccionadas con PHP | BaulCode</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Obtener valores de multiples CheckBox</h3>
<hr>
<div class="row">
<div class="col-8 col-md-8">
<!-- Contenido -->
<form action="index.php" method="post">
<label class="heading">Seleccione su lenguaje favorito:</label>
<div class="checkbox">
<label><input type="checkbox" name="check_lista[]" value="C++">C++</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="check_lista[]" value="Java">Java</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="check_lista[]" value="PHP7">PHP 7</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="check_lista[]" value="HTML5/CSS">HTML5/CSS</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="check_lista[]" value="JavaScript/jQuery">JavaScript/jQuery</label>
</div>
<button type="submit" class="btn btn-primary" name="enviar">Enviar Información</button>
<!----- Including PHP Script ----->
<?php include 'checkbox_proceso.php';?>
</form>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin row -->
</div>
<!-- Fin container -->
<footer class="footer">
<div class="container"> <span class="text-muted">
<p>Códigos <a href="https://www.baulphp.com/" target="_blank">BaulPHP</a></p>
</span> </div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
b) Códigos PHP: checkbox_proceso.php
Este fichero es el motor de procesamiento de las casillas de verificación que estamos realizando en este artículo. Por lo tanto, es la secuencia de comandos que usara el bucle foreach para mostrar el valor individual de las casillas de verificación procesadas.
Sin embargo, también hemos utilizado un contador para contar el número de casillas de verificación marcadas por el usuario en el formulario.
<?php
if(isset($_POST['enviar'])){
if(!empty($_POST['check_lista'])) {
// Contando el numero de input seleccionados "checked" checkboxes.
$checked_contador = count($_POST['check_lista']);
echo "<p>Has seleccionado los siguientes ".$checked_contador." opcione(s):</p> <br/>";
// Bucle para almacenar y visualizar valores activados checkbox.
foreach($_POST['check_lista'] as $seleccion) {
echo "<p>".$seleccion ."</p>";
}
echo "<br/><b>Nota :</b> <span>De manera similar, también puede realizar operaciones CRUD usando estos valores seleccionados.</span>";
}
else{
echo "<p><b>Por favor seleccione al menos una opción.</b></p>";
}
}
?>
CONCLUSIÓN
- El uso de esta metodología es muy recomendable porque nos permite trabajar solo con los elementos marcados en el grupo de casillas de verificación de nuestro formulario.
- Por lo tanto, al poder trabajar de manera dinámica su usabilidad se incrementa y también podemos realizar operaciones CRUD (crear, leer, actualizar y eliminar) en la base de datos.
- Espero que les guste este artículo y no se olviden de comentar ante cualquier inquietud.
DESCARGAS
Para que lo implementen sin complicaciones les dejare un archivo comprimido con todos los ficheros necesarios para su correcto funcionamiento.
[sociallocker id=5099]
Muchas gracias
Muchísimas gracias! me facilitaste bastante tiempo. Buen blog.
Excelente tutorial , muy buena explicación , me fue de mucha utilidad.
Excelente tutorial, y muy bueno que sea en español. Muy buena y clara tu explicación Nestor
Hola, muy buenos tus artículos me han salvado mas de una ocasión, como puedo insertar varios checkboxes en varias columnas en una BBDD?
Saludos..
Hola, muy buenos tus artículos me han salvado mas de una ocasión, como puedo insertar varios checkboxes en varias columnas en una BBDD?
Saludos..
En el caso de input text creados dinámicamente como podria hacer, por que no me recibe ningún dato y no manda ningún error
Muchas gracias andaba buscando algo asi por horas