Question

I have the following function that checks/unchecks all checkboxes on the page by selecting one

$("#checkall").click(function() {
    var checked_status = this.checked;
    $("input:checkbox").each(function() {
        this.checked = checked_status;
    });
});

I need to modify it in such a way that if all are selected by clicking checkall and then one is unchecked the #checkall gets unchecked as well. Or do I need to create a separate function for this?

Also when NONE of the checkboxes is selected I need to add a class to another element.

$("#myElement").addClass("disabled");

Putting it all together sort of complicates things for me.

Answer 1

I would use change event.

Is this what you are after?:

<div class="checkall">
    <input type="checkbox" id="checkall">
</div>
<div id="list">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

and jquery:

var checkboxes = $(":checkbox", "#list").change(function() {
        var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length;

        checkAll[0].checked = allIsChecked;
});

var checkAll = $("#checkall").change(function() {
        checkboxes.prop("checked",this.checked);
});

demo (if you are using jquery 1.6+):
http://jsbin.com/ezofal/edit

added the #MyElement class toggle in this link: http://jsbin.com/ezofal/2/edit