Javascript 在页面加载时选中所有子项时未选中父项

我知道这个问题已经开始了。但在我的例子中，由于HTML结构，它是不同的。所以我有一个无序的列表。我希望在检查所有子项时检查父项。在我现在的例子中，如果孩子们都没有被检查，而我检查了最后一个孩子，那么父母就会被检查。那很好。但是，当选中所有子项时，在页面加载时，不会选中父项。我的jquery代码出了什么问题？这是我的建议

这是我的jquery代码

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

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

函数的内容是单击事件的主体，因此，它被称为using.call with

this

设置为任何一个复选框，就像您单击了它一样

最后两行可以写成一行

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

---

共享html部分

我的jquery代码有什么问题？

什么都没有，只不过它只是在响应一次点击时运行，这在加载页面时不会发生，显然很棒！在小提琴中，当选中/取消选中父对象时，所有子对象都不会选中/取消选中。为使其正常工作，应进行哪些更改？很抱歉，我是jquery新手，使用

.call（）

，我以前从未见过在jquery中使用它+1问题是，如果我错误地选中/取消选中父项，它将停止working@YohanBlake-您的原始代码从未处理过单击父项的问题，因此我没有为您添加该代码是的，请参阅编辑的代码-在使用.attr（）时发生了一些不寻常的事情，我并不假装理解