Activar y Desactivar Checkbox con jQuery y JavaScript

Activar y Desactivar Checkbox con jQuery y JavaScript. En este artículo abordaremos el tema de las casillas de verificación conocidos como (Checkbox), en el cual activaremos o desactivaremos al presionar un solo input tipo Checkbox.

El objetivo de este ejemplo es activar dinámicamente todos los CheckBox de nuestro formulario usando el lenguaje JavaScript y también el lenguaje jQuery.

Activar y Desactivar Checkbox con jQuery y JavaScript

A continuación detallaremos una serie de preguntas y respuestas acerca del uso de este evento.

¿Qué usos puedo darle a este ejemplo?

En realidad se puede aplicar en todos nuestros sistemas donde tenemos varios checkbox y para evitar la selección unitaria. Por lo tanto, presionando solo un checkbox podemos activar todas las casillas de nuestro formulario.

¿Qué lenguajes se aplicara para este ejemplo?

Usaremos dos lenguajes para que ustedes puedan elegir.

1. Usando el lenguaje JavaScript

El lenguaje JavaScript nos permite mediante el uso de una casilla marcar todos los checkbox que existan en la página. Sin embargo,  se ejecuta mediante el uso del evento ONCLICK, a través de la función «ActivarCasilla()«. Por lo tanto, esa función recorrerá todos los elementos input y cuando encuentre un checkbox le dará el valor de quien lo llamó (checkbox marcar/desmarcar todos)

La función mencionada hace todo el trabajo. Ahora, si el primer checkbox está (marcado/seleccionado) entonces activa todas las casillas, en caso contrario los desactivan.

¿Cómo funciona el método de JavaScript?

Para que se ejecute y ejecute la función hay que agregar un evento «onclick()» al checkbox controlador que se desea que controle la funcionalidad de seleccionar todos, aquí un breve ejemplo:

<input type="checkbox" onClick="ActivarCasilla(this);" /> Marcar / Desmarcar Todos

Código JavaScript y la función principal

Esta función es la encargada de activar y/o desactivar las casillas de verificación mediante el uno del evento «OnClick«.

<script type="text/javascript">
function ActivarCasilla(casilla) 
{
	miscasillas=document.getElementsByTagName('input'); //Rescatamos controles tipo Input
	for(i=0;i<miscasillas.length;i++) //Ejecutamos y recorremos los controles
	{
		if(miscasillas[i].type == "checkbox") // Ejecutamos si es una casilla de verificacion
		{
			miscasillas[i].checked=casilla.checked; // Si el input es CheckBox se aplica la funcion ActivarCasilla
		}
	}
}
</script>

Formulario HTML5

En este código listaremos todos los input tipo CheckBox que usaremos en el ejemplo.

<form>
<div class="form-check">
  <input type="checkbox" name="check1" class="form-check-input">
  <label class="form-check-label" for="exampleCheck1">Wordpress</label>
</div>
<div class="form-check">
  <input type="checkbox" name="check2" class="form-check-input">
  <label class="form-check-label" for="exampleCheck1">Drupal</label>
</div>
<div class="form-check">
  <input type="checkbox" name="check3" class="form-check-input">
  <label class="form-check-label" for="exampleCheck1">Joomla</label>
</div>
<div class="form-check">
  <input type="checkbox" name="check4" class="form-check-input">
  <label class="form-check-label" for="exampleCheck1">PHPBB</label>
</div>
<div class="form-check">
  <input type="checkbox" name="check4" class="form-check-input">
  <label class="form-check-label" for="exampleCheck1">SMF</label>
</div>  
</form>

2. Usando el lenguaje jQuery

En este segundo método nos enfocaremos a usar el lenguaje jQuery para el mismo objetivo (Seleccionar todas las casillas).

Librerías externas

Para poder usar las bondades del jQuery necesitamos declarar librerías externas que a continuación detallaremos:

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- 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">

Formulario HTML5 y BootStrap

Aquí mostraremos en contenido de nuestro formulario, es decir las casillas de verificación.

<form>

<ul class="list-group">
  <li class="list-group-item active"><label><input type="checkbox" id="MarcarTodos" />Marcar/Desmarcar Todos</label></li>
  <li class="list-group-item"><label><input type="checkbox" name="lenguaje[]" /> Lenguaje PHP</label></li>
  <li class="list-group-item"><label><input type="checkbox" name="lenguaje[]" /> BootStrap</label></li>
  <li class="list-group-item"><label><input type="checkbox" name="lenguaje[]" /> C++</label></li>
  <li class="list-group-item"><label><input type="checkbox" name="lenguaje[]" /> Android</label></li>
  <li class="list-group-item"><label><input type="checkbox" name="lenguaje[]" /> Java</label></li>
</ul>
</form>

Código jQuery para activar o desactivas CheckBox

Usaremos el método prop(). En el siguiente código nos basaremos en un identificador llamado» MarcarTodos«. Por lo tanto, este identificador será el encargado de desencadenar la activación o desactivación de todos los CheckBoxes de nuestro formulario.

<script >
      $('document').ready(function () {
   $("#MarcarTodos").change(function () {
      $("input:checkbox").prop('checked', $(this).prop("checked"));
   });
});
</script>

CONCLUSIÓN

Podemos usar cualquiera de los dos métodos para activar o desactivar CheckBox múltiple. Su uso es muy recomendado para sistemas o plataformas web.

Podemos aplicarlo en diversos casos, por ejemplo:

• Al eliminar múltiples registros
• Editar múltiples registros
• Insertar o guardar múltiples registros

Si observamos las principales plataformas una de ellas el PHPMyAdmin posee esta tecnología para manejar tablas y registros de manera dinámica.

DESCARGA

Les dejare un archivo comprimido para que puedan descargarlo e implementarlo en sus proyectos web.

Marcar y desmarcar CheckBox usando lenguaje jQuery

1 archivo(s) 0.00 KB

Descargar