Cocher/décocher les parents et les enfants

Question

Pouvez-vous faire un meilleur code? Je dois cocher/décocher tous les enfants en fonction du parent et quand un enfant est coché, cocher parent, quand tous les enfants sont décochés, décochez parent.

$(".parent").children("input").click(function() { 
    $(this).parent().siblings("input").attr("checked", this.checked); 
}); 

$(".parent").siblings("input").click(function() { 
    if (this.checked) { 
     $(this).siblings("div").children("input").attr("checked", true); 
     return; 
    } 

    var childs = $(this).siblings("div").siblings("input"); 

    for (i = 0; i < childs.length; i++) { 
     if ($(childs.get(i)).attr("checked")) 
      return; 
    } 

    $(this).parent().children("div").children("input").attr("checked", false); 
}); 

Answer 1

$(".parent").children("input").click(function() { 
    $(this).parent().siblings("input").attr("checked", this.checked); 
}); 

$(".parent").siblings("input").click(function() { 
    $(this).siblings("div").children("input").attr("checked", 
     this.checked || $(this).siblings("input[checked]").length>0 
    ); 
}); 

Answer 2

Woah, je suis méga confus. il semble que vous avez des entrées avec d'autres entrées à l'intérieur d'eux? ... ce qui n'a pas de sens. Voici ce que je pense votre structure ressemble, alors je vais ici.

<div class="parent"> 
    <input type="checkbox" /> 
    <div> 
     <input type="checkbox" /> 
     <input type="checkbox" /> 
    </div> 
    <input type="checkbox" /> 
    <div> 
     <input type="checkbox" /> 
     <input type="checkbox" /> 
    </div> 
</div> 

Et voici le code que j'utiliserais.

$("input[type='checkbox']").click(function() { 
    // turn on or off all descendants. 
    $(this)   // get this checkbox 
     // get the div directly after it 
     .next('div') 
     // get ALL the inputs in that div (not just first level children) 
     .find("input[type='checkbox']") 
     .attr("checked", this.checked) 
    ; 

    // now check if we have to turn the parent on or off. 
    $(this) 
     .parent() // this will be the div 
     .prev('input[type="checkbox"]') // this is the input 
     .attr(
      "checked",  // set checked to true if... 
      this.checked // this one is checked, or... 
      || $(this).siblings("input[type='checkbox'][checked]").length > 0 
          // any of the siblings are checked. 
     ) 
    ; 
}); 

mise à jour: je viens de tester cela et ça marche totalement (woo!). Il fonctionne également avec autant de niveaux d'imbrication que vous le souhaitez, et pas seulement deux.

Answer 3

Ceci est un joli petit fil qui m'a presque où je dois être. J'ai légèrement adapté le code de Nickf. Le but est que la vérification d'un enfant vérifie également le parent, et décochez un parent décocherait également tous les enfants.

$ ("input [type = 'checkbox']") cliquez sur (function() { if ($ (this.checked)) {

$(this) 
    .next('div') 
    .find("input[type='checkbox']") 
    .attr("checked", this.checked) 
; 
} 


$(this) 
    .parent() 
    .prev('input[type="checkbox"]') 
    .attr("checked", this.checked || $(this).siblings("input[type='checkbox'][checked]").length > 0 

    ) 
; 

}!).

Comment est-ce que l'on pourrait modifier cette option pour que tous les descendants ne soient pas cochés si le parent n'est pas coché?

Nouveau toutes les choses JQ et javascript..apologies.

Answer 4

$('.parent').click(function(){ 
    checkBox = $(this).find('input[type=checkbox]'); 
    checkBox.prop("checked", !checkBox.prop("checked")); // inverse selection 
}); 

Ultime.