Este plugin que vamos a realizar incluye varias de las mejoras que venimos explicando en los tutoriales sobre plugins del Manual de jQuery. De hecho, lo creamos con dos motivos didácticos. Por un lado queremos demostrar cómo hacer una envoltura del código del plugin por medio de una función, para protegerlo y aislarlo de otros posibles códigos de la página. Por otro lado, este script es una simple práctica sobre cómo hacer plugins en jQuery, que servirá como un ejemplo más en el Taller de jQuery.

Lo que vamos a construir es un sistema para seleccionar y deseleccionar un grupo de checkbox por medio de un enlace. Al hacer clic en un enlace se seleccionarán de una vez todos los checkboxes del grupo y al hacer clic en otro se quitará la selección de todos, ambos casos sin importar cómo estaban previamente.

Es una utilidad sencilla de realizar, que suele verse en distintas páginas, donde hay formularios con un listado grande de checkbox. Todo ello lo haremos en formato de plugin para que se pueda utilizar en cualquier página web donde se desee.

Adicionalmente, a este ejemplo le hemos incorporado un sistema para cargar una opción, que sirve para indicar si deseamos o no que el grupo de checkboxes esté habilitado o no. Si está habilitado podremos seleccionarlos y deseleccionarlos al pulsar sobre los checkbox y sobre los enlaces de seleccionar/deseleccionar todos. Si no están habilitados, sólo podríamos cambiar sus valores por medio de los enlaces.

Podemos ver una página con el ejemplo en marcha, para hacernos una idea exacta de nuestros objetivos.

Instrucciones para marcar y desmarcar un chekbox en jQuery

La funcionalidad de seleccionar y deseleccionar un checkbox se consigue a través del atributo HTML "checked" de la etiqueta INPUT. Si tiene el atributo el checkbox estará marcado y si no tiene el atributo, aparecerá desmarcado.

Para marcar un checkbox utilizaríamos este código:

//siendo la variable campo un objeto jQuery que contiene uno o más checkboxes
campo.attr("checked","1");

Para quitar la marca de un checkbox se puede hacer quitando el atributo "checked":

//campo es uno o varios campos check en un objeto jQuery
campo.removeAttr("checked");

Instrucciones para habilitar deshabilitar un checkbox

Un checkbox, así como cualquier otro campo de formulario se puede habilitar o deshabilitar a través del atributo "disabled" del campo INPUT.

Este sería el código para deshabilitar el campo:

campo.attr('disabled', true);

Ahora podemos ver el código para habilitar el campo, que simplemente quita el atributo disabled.

campo.removeAttr('disabled');

En ambos casos se supone que la variable campo es un objeto jQuery que contiene uno o más campos INPUT de formulario.

Plugin para generar enlaces de marcar y desmarcar todos los campos checkbox

Ahora que ya sabemos cómo realizar esos pasos básicos para alterar los checkboxes, pasemos al código del plugin jQuery, que esperamos os resulte bastante sencillo.

Nuestra idea es que el plugin se invoque sobre un contenedor vacío, donde se generarán y se insertarán los enlaces para seleccionar y deseleccionar los checkbox.

Como se va a comprobar, el plugin recibe un par de parámetros, uno es un selector para acceder al grupo de checkboxes que debemos marcar/desmarcar y otro es una lista de opciones en formato de objeto para configurar el plugin.

(function($) {
   $.fn.seleccionarDeseleccionarTodo = function(selectorCheckboxes, opciones) {
      //opciones de configuración por defecto
      var configuracion = {
         habilitados: true
      };
      //Las extiendo con las opciones recibidas al invocar el plugin
      $.extend(configuracion, opciones);
   
      this.each(function(){
         //todos los checkboxes
         var camosCheck = $(selectorCheckboxes);
         //capa para los controles de seleccionar/deseleccionar checkboxes
         elem = $(this);
         
         //creo el enlace para seleccionar todo
         var enlaceSel = $('<a href="#">Seleccionar</a>');
         //meto el enlace en la página
         elem.append(enlaceSel);
         //un separador de los enlaces
         elem.append($("<span> | </span>"));      
         //creo el enlace para deseleccionar todo
         var enlaceDesel = $('<a href="#">Deseleccionar</a>');
         //meto el enlace en la página
         elem.append(enlaceDesel);
         
         //miro si los campos deben estar habilitados
         if(configuracion.habilitados){
            habilitarCampos();
         }else{
            deshabilitarCampos();
         }
         
         
         ////////////////////////////////////////////////////////////
         //funciones
         ////////////////////////////////////////////////////////////
         function habilitarCampos(){
            camosCheck.removeAttr('disabled');
         }
         function deshabilitarCampos(){
            camosCheck.attr('disabled', true);
         }
         function seleccionarTodosCampos(){
            camosCheck.attr("checked","1");
         }
         function deseleccionarTodosCampos(){
            camosCheck.removeAttr("checked");
         }
         
         //evento para el enlace de deseleccionar todos los campos
         enlaceDesel.click(function(e){
            e.preventDefault();
            deseleccionarTodosCampos();
         });
         //añado un evento al enlace para seleccionar todos los campos
         enlaceSel.click(function(e){
            e.preventDefault();
            seleccionarTodosCampos();
         });
         
      });
      return this;
   };   
})(jQuery);

El código anterior está comentado para que se puedan ir entendiendo los pasos realizados. Además, hemos separado el código en diversas funciones que esperamos que ayuden que sea más claro.

Ejemplo para poner en marcha el plugin de marcar/desmarcar checkbox

Para poner en marcha el plugin necesitamos un HTML con un contenedor vacío para los enlaces de marcar/desmarcar y varios checkbox. Algo como esto:

<form method="post" action="#">
   <div id="seleccionardeseleccionar"></div>
   <input type="checkbox" name="si" class="controlseleccionar"> jQuery
   <br>
   <input type="checkbox" name="si" class="controlseleccionar"> Eventos
   <br>
   <input type="checkbox" name="si" class="controlseleccionar"> Plugins
   <br>
   <input type="checkbox" name="si" class="controlseleccionar"> Otra cosa
</form>

Ahora, con un poco de jQuery invocamos el plugin:

$("#seleccionardeseleccionar").seleccionarDeseleccionarTodo(".controlseleccionar");

Como se puede ver, se invoca sobre el elemento DIV donde queremos ver los enlaces y luego se envía el selector para los campos checkbox, que es ".controlseleccionar", pues a todo el grupo de INPUT les pusimos esa clase CSS.

Podríamos también invocar el código del plugin enviando el objeto de opciones en un segundo parámetro:

$("#seleccionardeseleccionar").seleccionarDeseleccionarTodo(".controlseleccionar", {
   habilitados: false
});

Eso es todo. Ahora si lo deseamos, podemos acabar echando un vistazo al ejemplo en marcha.