Ir al contenido principal

#JQuery Mostrar contenido al hacer clic en checkbox

El siguiente código lo usé dentro de un sistema cuando deseaba publicar una div con cierto contenido, después de marcar un checkbox que decía "Acepto las cláusulas del contrato".

Si presionaban el checkbox salía el mensaje con otro botón para continuar el proceso, y si no lo hacían no podían continuar.



Esto nos sirve también para desplegar contenido dentro de un elemento (por ejemplo una div) al hacer clic en otro elemento (por ejemplo un botón). Los cuales están referenciados en el JQuery por el atributo ID del elemento en turno.

$(document).ready(function() {
 var toogCheck = jQuery('#acepto');
 var boton = jQuery('#boton_docs');
 $(toogCheck).click(function(event) {
  if (toogCheck.is(':checked')) {
   boton.show();
  } else {
   boton.hide();
  }
 });
});


//#acepto es el id del checkbox que hay que marcar para desplegar la div
// #boton_docs es el div que se mostrará cuando se marque el botón acepto.

ACTUALIZACIÓN

Imaginemos que tenemos dos listas de campos con checkbox. Una se llama Clientes y la otra Proveedores.

Cliente 1
Cliente 2
Cliente 3

Proveedor 1
Proveedor 2
Proveedor 3

Y si deseo poner un botón que al seleccionarlo me marque todos los checkbox del tipo CLIENTE. Y otro botón que al marcarlo (Seleccionar todos) me marque únicamente los tipo proveedor. Se podría hacer con el siguiente código.



$("#selectClientes").click(function(){ // Nuestro botón seleccionar TODOS LOS CLIENTES tendría la ID SelectClientes
      var checked_status = this.checked;
      $("input[name='cliente[]']").each(function(){ // Nuestro Input Check se llamaría cliente[] es un array de ID de clientes
        this.checked = checked_status;
      });
    });

Comentarios

Entradas populares de este blog

Solucionar Error Mime Types en validación de campo File

Al querer validar un campo de tipo file de la siguiente forma: required|mimes:png,gif,jpeg,txt,pdf,doc Nos puede salir un error de myme types. Para solucionarlo hay que descomentar las siguiente línea en el archivo php.ini y reiniciar el servidor apache. extension=php_fileinfo.dll

Desactivar URL de registro de usuario en Laravel

Para desactivar el registro de usuarios en el sitio, debemos agregar (al agregarla se sobreescribe el método) la función siguiente en el AuthController public function getRegister() { return redirect('auth/login'); // or something else }

Laravel y los Principios de Arquitectura SOLID

Una Alianza Robusta para el Desarrollo de Software. Laravel, el popular marco de desarrollo web en PHP, ha ganado reconocimiento no solo por su elegante sintaxis y facilidad de uso, sino también por su compromiso con los principios de diseño de software, especialmente los principios SOLID. Estos principios, acuñados por Robert C. Martin, son guías fundamentales para crear sistemas flexibles, mantenibles y escalables. Laravel, desde sus inicios, ha abrazado estos principios, estableciendo así una base sólida para el desarrollo de aplicaciones web modernas. 1. Principio de Responsabilidad Única (SRP): El SRP establece que una clase debe tener una única razón para cambiar. Laravel fomenta este principio al proporcionar un sistema de controladores claro y coherente. Los controladores en Laravel se centran en una tarea específica, asegurando que cada clase tenga una responsabilidad única y facilitando la extensión y mantenimiento del código. 2. Principio de Abierto/Cerrado (OCP): El OCP s...