Eltern nicht überprüft, wenn alle Kinder beim Laden der Seite überprüft werden

Question

Ich weiß, diese Frage ist bereits auf SO. Aber in meinem Fall ist das wegen der HTML-Struktur anders. Also habe ich eine ungeordnete Liste. Ich möchte, dass die Eltern überprüft werden, wenn alle Kinder überprüft werden. In dem, was ich jetzt habe, wenn die Kinder alle nicht überprüft werden, und ich überprüfe das letzte der Kinder, wird das Elternteil überprüft. Das ist gut. Wenn alle untergeordneten Elemente beim Laden der Seite überprüft werden, wird das übergeordnete Element nicht überprüft. Was ist falsch in meinem jquery Code? Hier ist die JSFiddle.

Dies ist mein jQuery-Code

jQuery(document).ready(function() { 
$('.list-group-item input[type=checkbox]').on('click', function() { 
var totalCheckbox = $(this).closest('ul').find('li input[type=checkbox]').length; 
var checkboxChecked = $(this).closest('ul').find('li input:checked').length; 
var mainCheckbox = $(this).closest('.panel-default').find('.panel-title input[type=checkbox]'); 
if (totalCheckbox == checkboxChecked) { 
    mainCheckbox.attr('checked', true); 
} else { 
    mainCheckbox.attr('checked', false); 
} 
}) 
}); 

Answer 1

Was in meinem Jquery Code falsch?

Nichts, außer es in Reaktion auf einen Klick nur läuft, was nicht geschieht, wenn eine Seite geladen wird, offensichtlich

Code Wiederholung zu vermeiden, eine Funktion erstellen - hier zu Ehren der aktuellen Begeisterung , ist es gottaCheckEmAll

jQuery(document).ready(function() { 
    function gottaCheckEmAll() { 
     var totalCheckbox = $(this).closest('ul').find('li input[type=checkbox]').length; 
     var checkboxChecked = $(this).closest('ul').find('li input:checked').length; 
     var mainCheckbox = $(this).closest('.panel-default').find('.panel-title input[type=checkbox]'); 
     console.log(totalCheckbox, checkboxChecked, mainCheckbox); 
     if (totalCheckbox == checkboxChecked) { 
      mainCheckbox.attr('checked', true); 
     } else { 
      mainCheckbox.attr('checked', false); 
     } 
    } 
    $('.list-group-item input[type=checkbox]').on('click', gottaCheckEmAll); 
    gottaCheckEmAll.call($('.list-group-item input[type=checkbox]')[0]); 
}); 

der Inhalt der Funktion ist der Körper Ihres Click-Ereignis genannt, so, es heißt mit this Satz zu einem der Kontrollkästchen mit .call, als ob Sie es

geklickt würde

working code

die letzten beiden Zeilen konnte in einer wie

gottaCheckEmAll.call($('.list-group-item input[type=checkbox]').on('click', gottaCheckEmAll)[0]); 

nicht geschrieben werden sicher, wie lesbar das heißt wenn

Ihren Code zu vereinfachen, aber:

jQuery(function() { //shorthand notation of jQuery(document).ready(
    function gottaCheckEmAll() { 
     // simplify checking, just see if anything is unchecked 
     var checkboxUnchecked = $(this).closest('ul').find('li :not(input:checked)').length; 
     var mainCheckbox = $(this).closest('.panel-default').find('.panel-title input[type=checkbox]'); 
     // main is checked if no subs unchecked 
     // don't use .attr() here for some reason 
     mainCheckbox[0].checked = !checkboxUnchecked; 
    } 
    gottaCheckEmAll.call($('.list-group-item input[type=checkbox]').on('click', gottaCheckEmAll)[0]); 
}); 

UPDATED working code mit der Handhabung des Eltern klicken

-Code oben ist

jQuery(function() { 
    function gottaCheckEmAll() { 
     console.log(this); 
     var checkboxUnchecked = $(this).closest('ul').find('li :not(input:checked)').length; 
     var mainCheckbox = $(this).closest('.panel-default').find('.panel-title input[type=checkbox]'); 
     mainCheckbox[0].checked = !checkboxUnchecked; 
    } 
    gottaCheckEmAll.call($('.list-group-item input[type=checkbox]').on('click', gottaCheckEmAll)[0]); 
    $('input[value="Accessories"]').on('click', function() { 
     var checked = this.checked; 
     console.log(checked); 
     $(this).closest('.panel').find('.list-group-item input').each(function(i, el) { 
      el.checked = checked 
     }); 
    }) 
});