CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Rolf
Rolf

Reputation: 105

Checkboxes with parent and child selections

I have a row of checkboxes and I want the following: - when clicking the parent select/unselect all child checkboxes - when all checkboxes are checked (including the parent) and you uncheck one of the child checkboxes, the parent should also uncheck.

I have this code:

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

And here it is in a fiddle: http://jsfiddle.net/2b2hw58d/1/

Why doesn't it work?

Upvotes: 0

Views: 1751

Answers (3)

RGS
RGS

Reputation: 5211

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

Use 'prop' instead of 'attr'.

Demo:

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use .prop() instead of .attr() also, use .closest() to find the closest ancestor element matching the selector.

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

Demo: Fiddle

Upvotes: 2

Krzysiek
Krzysiek

Reputation: 2495

In this parents('fieldset:eq(0)') part :eq(0) isn't needed and use prop instead attr.

JSFiddle

Upvotes: 1

Related Questions