Checkbox dependientes

[giancarloffi]

Hola amigos de forosdelweb, esta ves necesitando saber cual es al forma de poder hacer unos checkbox dependientes, tengo varias tablas relacionadas, lo que deseo es que al seleccionar un checkbox me aparescan otros checkbox que dependen de este, si selecciono otro checkbox pues que me aparescan sus chekcbox respectivos, algo asi como los combos dependiente, la verdad no tengo mucha idea de como hacerlo (no manejo mucho jquery) y necesito alguien que me de una guia o pista (o en todo caso algo ya hecho xD), gracias de ante mano.

[Alexis88]

Ahora mismo imagino en varias formas de hacerlo, una de ellas consistiría en tener los checkbox dependientes en contenedores cuya clase sea igual que el identificador del checkbox padre, de este modo, cuando marques un checkbox padre, muestras al contenedor cuya clase coincida con el identificador del checkbox marcado.

Código HTML:

<section id = "principal">
    Checkbox A: <input type = "checkbox" id = "a" />
    Checkbox B: <input type = "checkbox" id = "b" />
    Checkbox C: <input type = "checkbox" id = "c" />
</section>
 
<section id = "secundario">
    <div class = "a">
        A<input type = "checkbox" />
        A<input type = "checkbox" />
        A<input type = "checkbox" />
    </div>
    <div class = "b">
        B<input type = "checkbox" />
        B<input type = "checkbox" />
        B<input type = "checkbox" />
    </div>
    <div class = "c">
        C<input type = "checkbox" />
        C<input type = "checkbox" />
        C<input type = "checkbox" />
    </div>
</section>
 

Código CSS:

div{
    display: none;
}
 

Código Javascript:

$("#principal [type=checkbox]").click(function(){
    var self = this;
    $("#principal [type=checkbox]").each(function(index, checkbox){
        checkbox.checked = checkbox == self ? true : false;
    });
    $("#secundario div").each(function(index, div){
        div.style.display = div.className == self.id ? "block" : "none";
    });
});
 

Y para que el checkbox anteriormente marcado no quede así, recorro al conjunto de checkbox padre y en la iteración, dejo marcado al checkbox que coincida con el que acabamos de marcar, tomando así un comportamiento similar al de los radiobutton.



Imagino que esto podría simplificarse, pero es solo una de las tantas alternativas de solución.

Saludos

[giancarloffi]

Hola Alexis88, gracias por responder, bueno la idea esta por ahi pero cuando marco otro checkbox no desaparesca el que se marco anteriormente como en tu ejemplo, sino que aparescan todos los checkbox relacionados, por ejemplo amrco el A aparescan los secundarios del A si tambien marco el c aparescan tambien los secundarios del C y estos jalarlos desde una tabla en BD ya que tengo muchos cheackbox secundarios.

[Alexis88]

En ese caso, la figura cambia un poco.

Código Javascript:

$("#principal [type=checkbox]").click(function(){
    if (this.checked) $("#secundario ." + this.id).show();
    else $("#secundario ." + this.id).hide();
});
 

Lo que hago es mostrar al <div> cuya clase coincida con el id del checkbox padre marcado, mientras que procedo a ocultarlo cuando lo desmarque.



Saludos

[giancarloffi]

claro en si la idea es esa aca un ejemplo cuando lo hice con unas cajas de texto:

Código PHP:

  $(function() {
    $('.ck').on('click', function() {
        if ( $(this).is(':checked') )
        {
            $('#patologiapersonal' + $(this).val()).css({'display':'block'});
        }
        else {
            $('#patologiapersonal' + $(this).val()).css({'display':'none'});
        }
    })
}); 
   

pero los checkbox tanto principales como secundarios los jalo de una base de datos y los muestro con un foreach, mi duda mas viene por ahi:(

[Alexis88]

No veo cual es el inconveniente, pues bastaría que al momento de crear los contenedores con los checkbox hijos, le asignes el identificador respectivo a cada contenedor para que tu función surta efecto.

Saludos