Create Multi-item Checklists

The Problem

Checkboxes are great on iForms, wonderful, but our doctors want even less clicking. So we need a way to select a group of checkboxes with one click.

The Solution

One easy way to do that is to group common items together and give them a checkbox to check all of them. We'll refer to that master checkbox as a parent checkbox and all of the members as, yes child checkboxes.

We need to:

• create a parent checkbox
• identify the child checkboxes that belong to it
• create a script to check all the child boxes when the parent is checked
• create a script to uncheck the parent if one of the child boxes is unchecked
• and lets throw some highlighting in there for prettiness

The Code

When our parent with the id "bundle_1" is clicked it fires "all_cb1"

$(function() {
    $("#bundle_1").click(all_cb1);
});

"all_cb1" checks to see if "bundle_1" is checked or unchecked, if the click checks the parent then it sets all of the child checkboxes which are members of group "bundle_1" to checked and and adds the class "checked" which is what drives our highlighting. if "bundle_1" is unchecked it removes those statuses from the group.

function all_cb1() {
    if (this.checked) {
        $("input.bundle_1").attr("checked", true);
        $("input.bundle_1").parent("td").addClass("checked");
        this.removeclass("checked");
    } else {
        $("input.bundle_1").attr("checked", false);
        $("input.bundle_1").parent("td").removeClass("checked");
        this.removeclass("checked");
    }
}

This little bit unchecks the parent if one of the child boxes is unchecked.

$(function() {
    $("input.bundle_1").click(function() {
        $('#bundle_1').attr('checked', false);
    });
});

And last but not least, our general highlighting script

$("input:checkbox").click(function() { 
    $(this).parent("td").toggleClass("checked");
});

See for Yourself

Demo