javascript - bootstrap - Marque/desmarque el árbol con alternar/deslizar: algunos problemas menores de codificación

treeview html5

Question

Si bien esto utiliza parte del código de una pregunta que hice ayer ( marque / desmarque dinámicamente casillas de verificación en un árbol ), creo que esta es una pregunta ligeramente diferente, ya que necesito agregar elementos de compensación y también deslizar datos en el árbol y abajo.

Tomé lo que aprendí ayer y lo agregué en un control deslizante según este enlace - http://jsfiddle.net/3V4hg/ - pero ahora he agregado el clearing divs el árbol no está desmarcando todo el camino hacia la parte superior si el la parte inferior del árbol no tiene opciones seleccionadas. Si observa el JSFiddle, si marca A y / o B, desmarquelo, el padre y los abuelos no se desmarcarán automáticamente. Además, por algún motivo que aún no he descubierto, el control deslizante decide deslizarse al hacer clic en la casilla de verificación en el área hija (también he notado que la imagen de alternar para el área de la región para mostrar cambios cuando el continente se alterna) no he intentado resolver eso como acabo de notar al agregar a JSFiddle).

También estoy pensando que puede haber una mejor manera de codificar los conmutadores / controles deslizantes (ya que los usa más de un tipo de alternancia, pero no estoy seguro).

Answer 1

Fiddle: http://jsfiddle.net/3V4hg/2/

He aplicado algunas modificaciones a tu código. Eche un vistazo al violín y los comentarios (en el código y en la parte inferior de la respuesta):

$(''#delivery_zones :checkbox'').change(function(){
     $(this).siblings(''ul'').find('':checkbox'').prop(''checked'', this.checked);
     if(this.checked){
         $(this).parentsUntil(''#delivery_zones'', ''ul'').siblings('':checkbox'').prop(''checked'', true);
     } else {                   
         $(this).parentsUntil(''#delivery_zones'', ''ul'').each(function() {
             var $this = $(this);
             var childSelected = $this.find('':checkbox:checked'').length;
             if(!childSelected){
                // Using `prevAll` and `:first` to get the closest previous checkbox
                $this.prevAll('':checkbox:first'').prop(''checked'', false);
             }
         });
     }
});

// collapse countries and counties onload
$(".country_wrap").hide();                
$(".county_wrap").hide();                                 

// Merged two click handlers
$("#delivery_zones").click(function(event){
    var root = event.target;              // Get the target of the element
    if($.nodeName(root, ''input'')) return; // Ignore input
    else if(!$.nodeName(root, ''li'')) {
        root = $(root).parents(''li'').eq(0); // Get closest <li>
    }
    // Define references to <img>
    var img = $(''.toggle img'', root).eq(0);
    // Define reference to one of the wrap elements *
    var c_wrap = $(''.country_wrap, .county_wrap'', root).eq(0);
    if(img.attr(''src'') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
        img.attr(''src'', ''http://www.prbuzzer.com/images/downarrow-white.png'');
        c_wrap.slideUp("slow");
    } else {
        img.attr(''src'', ''http://uk.primadonna.eu/images/arrow_white_up.gif'');
        c_wrap.slideDown("slow");
    }
});

^* He definido la raíz como un elemento <li> . Se debe seleccionar la primera aparición del elemento .count(r)y_wrap , que se logra usando .eq(0) .

Su código anterior contenía algunos errores lógicos, que también he corregido: $(''.toggle img'', this) selecciona cada elemento <img> que es un elemento secundario de .toggle , lo que hace que las flechas al final del árbol se alternen también. Mi solución con event.target es más nítida y permite que tu ejemplo se extienda a árboles aún más profundos.