Auto Check Parent Checkbox

I have an AJAX request that pulls in a list of folders with a checkbox next to each list item. If I check the checkbox next to a parent folder, I have all of the children folders a

Solution 1:

I think there's a bit of logic issue here.

Say you have the parent, a child and a child's child, per your requirement, when you click on an unchecked child, the current element is checked and the child element of this as well as the parent of this is checked as well, but the sibling of this is not checked right?

What happens when you click on the parent? None of the check box is checked? So if I decided to check all the check box, but I already have a child check box check, that means I will have to check the parent check box to un-check everything and then click on it again to check all the check boxes?

This is not a very good user experiences. Anyway, I think the best thing to do is separate the function click events out into three different listeners instead of trying to do it in one function. With that in mind, I didn't write out the use case when you have everything checked and you un-check one of the child, then the parent check box should still be checked. You'll have to keep expanding these.

<ul class="level-one">
    <liclass="level-one-closed"><spanclass="level-one-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-one" />
            Parent
        </span><ulclass="level-two"><liclass="level-two-closed"><spanclass="level-two-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-two" />
                    Child
                </span><ulclass="level-three"><li><spanclass="level-three-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-three" />
                            Child's Child
                            </span></li></ul></li><liclass="level-two-closed"><spanclass="level-two-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-two" />
                    Child
                </span><ulclass="level-three"><li><spanclass="level-three-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-three" />
                            Child's Child
                        </span></li><li><spanclass="level-three-folder"><inputtype="checkbox"class="userPermissionCheckBox-level-three" />
                            Child's Child
                        </span></li></ul></li></ul></li>
</ul>

var $levelOneCheck = $('.userPermissionCheckBox-level-one');
var $levelTwoCheck = $('.userPermissionCheckBox-level-two');
var $levelThreeCheck = $('.userPermissionCheckBox-level-three');

$levelOneCheck.click(function() {
    var $isChecked = $(this).attr('isChecked');
    if ($isChecked === 'true') {
        $(this).attr('isChecked', 'false');
        $levelTwoCheck.prop('checked', false).attr('isChecked', 'false');
        $levelThreeCheck.prop('checked', false).attr('isChecked', 'false');
    } else {
        $(this).attr('isChecked', 'true');
        $levelTwoCheck.prop('checked', true).attr('isChecked', 'true');
        $levelThreeCheck.prop('checked', true).attr('isChecked', 'true');
    }
});

$levelTwoCheck.click(function() {
    var $isCheckedLevelTwo = $(this).attr('isChecked');
    if ($isCheckedLevelTwo === 'true') {
        $(this).attr('isChecked', 'false');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', false).attr('isChecked', 'false');
        $(this).closest('.level-two-closed').find('.level-three-folder .userPermissionCheckBox-level-three').prop('checked', false).attr('isChecked', 'false');

    } else {
        $(this).attr('isChecked', 'true');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', true).attr('isChecked', 'true');
        $(this).closest('.level-two-closed').find('.level-three-folder .userPermissionCheckBox-level-three').prop('checked', true).attr('isChecked', 'true');
    }
});

$levelThreeCheck.click(function() {
    var $isCheckedLevelTwo = $(this).attr('isChecked');
    if ($isCheckedLevelTwo === 'true') {
        $(this).attr('isChecked', 'false');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', false).attr('isChecked', 'false');
        $(this).closest('.level-two-closed').find('.level-two-folder .userPermissionCheckBox-level-two').prop('checked', false).attr('isChecked', 'false');

    } else {
        $(this).attr('isChecked', 'true');
        $(this).closest('.level-one-closed').find('.level-one-folder .userPermissionCheckBox-level-one').prop('checked', true).attr('isChecked', 'true');
        $(this).closest('.level-two-closed').find('.level-two-folder .userPermissionCheckBox-level-two').prop('checked', true).attr('isChecked', 'true');
    }
});

http://jsfiddle.net/xzigraz/BTXNk/3/

Solution 2:

As Matt said, you need a three-state checkbox, with a state for when some sub-items are checked and some are not.

You can do a three-state checkbox by making “indeterminate” the third state. You can set a checkbox to “indeterminate” with $(this).prop("indeterminate", true);. The checkbox will then look something like this: .

See this article on indeterminate checkboxes. That article not only explains indeterminate checkboxes, but has a demo of exactly what you want in the “Use Case?” section in the middle – though the article says that demo is incomplete because it only checks one level up. Here is the code that demo uses:

$(function() {
    // Apparently click is better chan change? Cuz IE?
    $('input[type="checkbox"]').change(function(e) {
        var checked = $(this).prop("checked"),
        container = $(this).parent(),
        siblings = container.siblings();

        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        });

        functioncheckSiblings(el) {
            var parent = el.parent().parent(),
            all = true;

            el.siblings().each(function() {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });

            if (all && checked) {
                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                });
                checkSiblings(parent);
            } elseif (all && !checked) {
                parent.children('input[type="checkbox"]').prop("checked", checked);
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                checkSiblings(parent);
            } else {
                el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                });
            }
        }

        checkSiblings(container);
    });
});

Solution 3:

$(document).ready(function () {
    $('input[type=checkbox]').click(function () {
        // if is checkedif ($(this).is(':checked')) {
            $(this).parents('li').children('input[type=checkbox]').prop('checked', true);
            $(this).parent().find('li input[type=checkbox]').prop('checked', true);    
        } else {   
            $(this).parents('li').children('input[type=checkbox]').prop('checked', false);
            // uncheck all children
            $(this).parent().find('li input[type=checkbox]').prop('checked', false);  
        }
    });
});