En este tutorial os voy a explicar que debes hacer para seleccionar y deseleccionar todos los checkboxes mediante jQuery. La mayoría de los novatos en este del desarrollo web se enfrentan al problema de poder seleccionar y deseleccionar todos los checkboxes de un formulario a la vez, en sus primeros pasos como desarrolladores. Mediante el script que te mostraremos en este artículo podrás seleccionar checkboxes individualmente, así como marcarlos de forma masiva.
Seguramente has visto esta acción en la mayoría de gestores de correo y CMS, en los que se llevan a cabo operaciones en masa como borrados, eliminaciones y demás operaciones. En este artículo te explicaremos cómo llevarlo a cabo, y al final del mismo, veremos también cómo imprimir todos los valores de los checkboxes marcados, por pantalla. ¿Te gusta lo que veremos hoy? ¡Pues manos a la obra!
Código jQuery
En el siguiente código hay una clase padre llamada .select-all que cambia el atributo de los sub checkboxes en la función .click. Toda la funcionalidad se lleva a cabo mediante jQuery, así que no olvides incluir la librería en el tag head de tu documento.
$('document').ready(function()
{
$(".select-all").click(function ()
{
$('.chk-box').attr('checked', this.checked)
});
$(".chk-box").click(function()
{
if($(".chk-box").length == $(".chk-box:checked").length)
{
$(".select-all").attr("checked", "checked");
}
else
{
$(".select-all").removeAttr("checked");
}
});
});
Código HTML
Formulario HTML muy simple que contiene múltiples checkboxes.
<ul>
<li><input type="checkbox" class="select-all" /> Select / Deselect All</li>
<li><input type="checkbox" class="chk-box" /> PHP</li>
<li><input type="checkbox" class="chk-box" /> Ajax</li>
<li><input type="checkbox" class="chk-box" /> jQuery</li>
<li><input type="checkbox" class="chk-box" /> Android</li>
<li><input type="checkbox" class="chk-box" /> XML</li>
</ul>Script completo
Script completo en el que se puede ver la práctica de seleccionar y deseleccionar checkboxes de manera masiva.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select / Deselect All Checkboxes with jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$(".select-all").click(function ()
{
$('.chk-box').attr('checked', this.checked)
});
$(".chk-box").click(function()
{
if($(".chk-box").length == $(".chk-box:checked").length)
{
$(".select-all").attr("checked", "checked");
}
else
{
$(".select-all").removeAttr("checked");
}
});
});
</script>
</head>
<body>
<h1>Select / Deselect All Checkboxes with jQuery</h1>
<ul>
<li><input type="checkbox" class="select-all" /> Select / Deselect All</li>
<li><input type="checkbox" class="chk-box" /> PHP</li>
<li><input type="checkbox" class="chk-box" /> Ajax</li>
<li><input type="checkbox" class="chk-box" /> jQuery</li>
<li><input type="checkbox" class="chk-box" /> Android</li>
<li><input type="checkbox" class="chk-box" /> XML</li>
</ul>
</body>
</html>Obtener los valores de los checkboxes seleccionados
Ahora vamos a echar un vistazo al siguiente código, el cual te ayuda a obtener los valores de los checkboxes que hemos seleccionado previamente. Una vez obtenidos, los imprimimos por pantalla. Para ello tenemos el siguiente formulario.
<form method="post">
<ul>
<li><label><input type="checkbox" class="select-all" /> Select / Deselect All</label></li>
<li><input type="checkbox" name="chk[]" class="chk-box" value="PHP" /> PHP</li>
<li><input type="checkbox" name="chk[]" class="chk-box" value="Ajax" /> Ajax</li>
<li><input type="checkbox" name="chk[]" class="chk-box" value="jQuery" /> jQuery</li>
<li><input type="checkbox" name="chk[]" class="chk-box" value="Android" /> Android</li>
<li><input type="checkbox" name="chk[]" class="chk-box" value="XML" /> XML</li>
<li><button type="submit" name="save">submit</button></li>
</ul>
</form>Código PHP
Y el código PHP debería ser el siguiente. Usando el bucle foreach podemos recuperar los valores de los checkboxes marcados.
if(isset($_POST['save']))
{
if(isset($_POST['chk'])=="")
{
echo "please select at least one";
}
else
{
foreach($_POST['chk'] as $languages)
{
echo $languages."
";
}
}
}
Fuente: codingcage.com