Use JQuery para marcar una casilla de verificación en un elemento de lista principal?

Question

Soy nuevo en Javascript y JQuery, así que he estado leyendo sobre él y estoy tratando de marcar (y desactivar) una casilla de verificación en un elemento de lista principal cuando uno de los elementos secundarios está marcado.

Si esto no tiene ningún sentido, eche un vistazo a la estructura de la lista.

<ul> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 1</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 2 
     <ul> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li> 
      <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li> 
     </ul> 
    </li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 3</li> 
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003" /> Parent 4</li> 
</ul> 

Si se comprueba Niño 1 o 2 Niño, quiero la entrada en Padre 2 a comprobar y fijar inactivo. Empecé a trabajar en ello, pero me quedé atrapado aquí:

$(function(){ 
    $('.child').click(function() { 
     $(this).parent().parent().parent().toggle(); 
    }); 
}); 

Como puede ver, no llegué muy lejos. Cualquier ayuda sería apreciada.

Gracias!

Answer 1

Prueba esto:

<script type="text/javascript"> 
$(function(){ 
    $('li ul input[type=checkbox]').click(function() { 
       var that = $(this); 
       var parentUL = that.parent().parent(); 
     var parentChk = parentUL.parent().find("input:first"); 
       var oneChecked = false; 
       parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;}); 
       console.log(oneChecked); 
       parentChk.attr("checked", oneChecked); 
    }); 
}); 
</script> 

Answer 2

el método .parent() devuelve solo el elemento DOM principal inmediato de su selector actual. El método .parents() buscará el árbol DOM para encontrar cualquier elemento padre que coincida con la selección. Entonces $ (".bar"). Parents (".foo") seleccionaría para todos los elementos padre con Clase "foo" de cualquier elemento con clase "barra".

Primero, proporcione a su elemento primario de destino un atributo identificable, ya sea una clase o una identificación. Si tuviera IDs, no necesitaría padres(), entonces use una clase.

$(".child").click(function(){ 
    $(this).parents('.parentclass').toggle(); 
}); 

Answer 3

Sobre la base de su margen de beneficio publicado, esto va a funcionar:

$('ul > li ul li > :checkbox').change(function() { 
    $(this).parents('li:last') 
      .children("input") 
      .attr("disabled", this.checked); 
}); 

También tenga en cuenta:

• Tienes numérico y duplicar identificadores, que son invalid.
• No tiene ninguna clase llamada 'niño' en su documento.
• .toggle "muestra u oculta elementos coincidentes". Hace no alternar su propiedad 'disabled'.

Inténtelo aquí: http://jsfiddle.net/karim79/QfTfr/

Answer 4

Marque esta fillde

$("input:checkbox + ul input:checkbox").click(function(){ 
    var $ul = $(this).closest("ul"); 
    var $parent = $ul.prev("input:checkbox"); 
    if($ul.find("input:checkbox:checked").length > 0){ 
     $parent.attr("checked", "checked"); 
    }else{ 
     $parent.attr("checked", ""); 
    } 
}) 

Si está utilizando la propiedad id para los elementos, lo que tiene que hacer Asegúrese de que tiene un valor único en el documento.