페이지로드시 모든 하위 항목이 선택 될 때 상위 항목이 선택되지 않음

내 jquery 코드에서 무엇이 문제입니까?

페이지가로드 될 때 발생하지 않는 클릭에 대한 응답으로 만 실행된다는 점을 제외하고는 아무것도 없습니다.

코드 반복을 피하기 위해 함수를 생성하세요. 여기에서는 현재 열풍을 기념하여 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]);
});

함수의 내용은 클릭 이벤트의 본문이므로 클릭 this한 것처럼 확인란 중 하나에 설정된 .call을 사용하여 호출 됩니다.

작업 코드

마지막 두 줄 은 다음과 같이 쓸 수 있습니다.

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

그것이 얼마나 읽기 쉬운 지 확실하지 않습니다.

그러나 코드를 단순화하려면 다음을 수행하십시오.

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]);
});

부모 클릭 처리와 함께 업데이트 된 작업 코드

위의 코드는

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
        });
    })
});