Thursday 31 January 2013

Check All the CheckBox when a "All" Check box is Checked using Jquery

 Sometimes it is required that to do bulk action, you need to select a checkbox so all the check-box corresponding to it get checked. This can be done as below.

Here you can use a ID instead of a class and rather than change you can go for a click event.
 $(".chkAll").live("change", function () {
 if ($(this).is(":checked")) {
                    $(this).siblings(".selectedSchool:checkbox").each(function () {
                        $(this).attr('checked', true);
                    });
                }
                else {
                    $(this).siblings(".selectedSchool:checkbox").each(function () {
                        $(this).attr('checked', false);
                    });
                }
            });


This code is used to check whether the total check-box is equal to the checked check-box or not & change the checked attribute for "All" check-box.

            $(".selectedSchool:checkbox").live("change", function () {

                if ($(".selectedSchool:checkbox:checked").length === 0) {
                    $(".chkAll").attr('checked', false);
                }
                if ($(".selectedSchool:checkbox:checked").length === $(".selectedSchool:checkbox").length) {
                    $(".chkAll").attr('checked', true);
                }
                if ($(".selectedSchool:checkbox:checked").length != $(".selectedSchool:checkbox").length) {
                    $(".chkAll").attr('checked', false);
                }
            });

No comments:

Post a Comment