Question

我有一排复选框，我想要以下内容： - 单击父级时选择/取消选中所有子复选框 - 当选中所有复选框（包括父级）并取消选中其中一个子复选框时，父级也应取消选中。

我有这段代码：

$(document).ready(function(){
    //clicking the parent checkbox should check or uncheck all child checkboxes
    $(".parentCheckBox").click(
        function() {
            $(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
        }
    );
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(
        function() {
            if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
            $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
            if (this.checked == true) {
                var flag = true;
                $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
                    function() {
                        if (this.checked == false)
                        flag = false;
                    }
                );
                $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
            }
        }
    );
});

这里有一个小提琴：http://jsfiddle.net/2b2hw58d/1/

为什么不起作用？

Answer 1

您还需要使用.prop()代替.attr()，使用.closest()查找与选择器匹配的最近祖先元素。

jQuery(function ($) {
    //clicking the parent checkbox should check or uncheck all child checkboxes
    $(".parentCheckBox").click(function () {
        $(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
    });
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(function () {
        var $fs = $(this).closest('fieldset');
        $fs.find('.parentCheckBox').prop('checked', !$fs.find('.childCheckBox').is(':not(:checked)'))
    });
});

演示：Fiddle

Answer 2

在此parents('fieldset:eq(0)')部分:eq(0)不需要使用prop代替attr。

JSFiddle

Answer 3

$(document).ready(function(){
    //clicking the parent checkbox should check or uncheck all child checkboxes
    $(".parentCheckBox").click(
        function() {
            $(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
        }
    );
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.childCheckBox').click(
        function() {
            if ($(this).closest('fieldset').find('.parentCheckBox').prop('checked') == true && this.checked == false)
            $(this).closest('fieldset').find('.parentCheckBox').prop('checked', false);
            if (this.checked == true) {
                var flag = true;
                $(this).closest('fieldset').find('.childCheckBox').each(
                    function() {
                        if (this.checked == false)
                        flag = false;
                    }
                );
                $(this).closest('fieldset').find('.parentCheckBox').prop('checked', flag);
            }
        }
    );
});

使用＆＃39; prop＆＃39;而不是＆＃39; attr＆＃39;。

演示：

http://jsfiddle.net/m3o7u7Lm/1/

带有父选择和子选择的复选框

3 个答案: