Question

我知道这个问题已经在了。但就我而言，由于HTML结构，它有所不同。所以我有一个无序列表。我想在检查所有孩子时检查父母。在我现在所拥有的，如果孩子们都没有被检查，并且我检查了最后一个孩子，那么父母将被检查。没关系。但是当检查所有孩子时，在页面加载时，父母不会被检查。我的jquery代码有什么问题？这是JSFiddle。

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

Answer 1

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

该功能的内容是您点击事件的正文，因此，使用.call调用this设置为任意一个复选框，就像您点击了一样它

working code

最后两行可以写成

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

UPDATED working code处理父点击

上面的代码是

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

在页面加载时检查所有子项时未检查父项

1 个答案: