Activa / desactiva dinámicamente las casillas de verificación en un árbol.

Tengo una pregunta similar a Desmarcar nodo primario si todos los hijos no están verificados en JQuery (con esta solución) y he tratado de modificarlo para que todos los hijos también se desmarquen si el padre no está marcado (lo que no se puede hacer arriba / abajo).

JSFiddle para lo anterior ( http://jsfiddle.net/fRxVs/ )

jQuery.each(jQuery('#treeList ul li').find(':checkbox'), function(){ jQuery(this).change(function (){ if (jQuery(this).is(':checked')) { jQuery(this).parentsUntil('#treeList').siblings().filter('input:checkbox').attr('checked', true).trigger('change'); }else{ jQuery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change'); } }); }); 

Aunque no estoy seguro de por qué, pero tuve que cambiar de prop de la última línea para que funcionara correctamente como JSFiddle localmente por alguna razón …

Básicamente tengo una configuración de 3 niveles:

 Grand-Parent - Parent -- Child 
  • Si el grandparent está marcado / deseleccionado, entonces sus hijos y nietos también deben ser chequeados / deseleccionados.
  • Si el parent está marcado / desactivado, sus hijos deben estar marcados / no marcado así como su padre.
  • Si se comprueba a los children , entonces se debe verificar a sus padres y abuelos (si no se verifica a los niños, no se debe verificar a los padres)

Estoy tratando de cambiar esto a Continente, País, Región – Creo que entenderás si tuviera que decir esto …

Gracias

Aquí está la solución: Fiddle: http://jsfiddle.net/fRxVs/55/

 $('#treeList :checkbox').change(function (){ $(this).siblings('ul').find(':checkbox').prop('checked', this.checked); if (this.checked) { $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true); } else { $(this).parentsUntil('#treeList', 'ul').each(function(){ var $this = $(this); var childSelected = $this.find(':checkbox:checked').length; if (!childSelected) { $this.prev(':checkbox').prop('checked', false); } }); } }); 

Modificaciones y explicaciones.

  • $ es exactamente lo mismo que jQuery . Sea consistente al usarlo: jQuery solo debe usarse cuando no esté seguro de si $ === jQuery (¿se sobrescribe $ ?).
  • :checkbox es un selector que coincide con cada input[type="checkbox"] . Es obsoleto especificar input:checbkox , ya que un elemento de checkbox siempre es un elemento de entrada.
  • .find(..) busca cualquier elemento que sea un elemento secundario (no es necesario que sea el elemento directo) del selector emparejado. "#treeList :checkbox" es más rápido y tiene el resultado equivalente a $('#treeList').find(':checkbox') .
  • Cuando se agrega una propiedad / método / evento a un objeto jQuery, se modificarán todos los elementos que coincidan con el selector. Por lo tanto, no tiene que recorrer cada elemento individualmente: jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)}) se puede reducir a jQuery('#treeList :checkbox').change(...) .
  • No es necesario que active el change después de cambiar el estado de la checkbox, ya que la función ya se ocupa del árbol completo.

Antigua pregunta, pero podrías hacerlo así:

 $('input[type=checkbox]').change(function(){ $(this).next().find('input[type=checkbox]').prop('checked', this.checked); $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function(){ return $(this).next().find(':checked').length; }); }); 

Fiddle: http://jsfiddle.net/ojc1qg1f/