Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Javascript: Selección múltiple de campos checkbox con jQuery

Datos de búsqueda

Javascript: Selección múltiple de campos checkbox con jQuery

He preparado la típica funcionalidad en la que al seleccionar un campo INPUT de tipo checkbox se seleccionan otros campos asociados a él.

Este sería el HTML:

<ul class="clear">
 <li class="superior">
  <label for="c_1"><input type="checkbox" id="c_1" class="superior" /><span>Opción 1</span></label>
  <ul class="inferior">
   <li><label for="c_1_1"><input type="checkbox" id="c_1_1" /><span>Opción 1.1</span></label></li>
   <li><label for="c_1_2"><input type="checkbox" id="c_1_2" /><span>Opción 1.2</span></label></li>
  </ul>
 </li>
 
 <li class="superior">
  <label for="c_2"><input type="checkbox" id="c_2" class="superior" /><span>Opción 2</span></label>
  <ul class="inferior">
   <li><label for="c_2_1"><input type="checkbox" id="c_2_1" /><span>Opción 2.1</span></label></li>
   [...]
  </ul>
 </li>
 
 <li class="superior">
  <label for="c_3"><input type="checkbox" id="c_3" class="superior" /><span>Opción 3</span></label>
  <ul class="inferior">
   <li><label for="c_3_1"><input type="checkbox" id="c_3_1" /><span>Opción 3.1</span></label></li>
   [...]
  </ul>
 </li>
 
 <li class="superior">
  <label for="c_4"><input type="checkbox" id="c_4" class="superior" /><span>Opción 4</span></label>
  <ul class="inferior">
   <li><label for="c_4_1"><input type="checkbox" id="c_4_1" /><span>Opción 4.1</span></label></li>
   [...]
  </ul>
 </li>
</ul>

Este el JS para llamar al plugin de jQuery:

jQuery('input.superior').each(function () {
	jQuery(this).chequearCampos();
});

Y este el JS del plugin de jQuery:

(function($){
 $.fn.chequearCampos = function(options){
  
  var op = {
   campo: 'input[type="checkbox"]'
  }
  
  var datos = {
   campoInicial: '',
   campos: ''
  }
  
  var options = $.extend(op, options);
  
  return this.each(function(){
   datos.campoInicial = $(this);
   datos.campos = datos.campoInicial.parent().next().contents().find(op.campo);
   datos.campos.click(alternarInicial);
   datos.campoInicial.click(alternar);
  });
  
  function alternarInicial () {
   var num = datos.campos.length;
   var i=0; var j=0; while (i<num) {
    if (datos.campos.eq(i).attr('checked')==true) {j++;}
    i++;
   }
   
   if (j==num) {
    datos.campoInicial.attr('checked',true);
   } else {
    datos.campoInicial.attr('checked',false);
   }
  }
  
  function alternar () {
   if (datos.campoInicial.attr('checked')==false) {
    datos.campos.attr('checked',false);
   } else {
    datos.campos.attr('checked',true);
   }
  }
  
  
}})(jQuery);

Ver ejemplo funcionando.

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio