Checkbox in header to be checked when all child checkboxes are checked and unchecked when even one of them is unchecked

Question

I have a checkbox column in my grid and on checking the master or title checkbox all checkboxes get checked and similarly it works for unchecked scenario.But I want that when all checkboxes are checked ,the header checkbox should automatically get checked and when one of them is unchecked the header checkbox should be unchecked 2....What is needed is a javascript or a jquery function....Please help....

Answer 1

Hiya hope this helps A working example: (I reckon this is what you are looking for - Obviously you need to make changes to fit for your specific requirement)

Code solution & link:

http://jsfiddle.net/tjMCQ/

If you got any code please make a jsfiddle and we can help you to nail it down.

Cheers,

Answer 2

Following assumes you have a TBODY in table and the "check all" ID="main_check" and is not in TBODY

Demo http://jsfiddle.net/QH3AX/

var $main_check = $('#main_check');
/* cache all the row checkboxes*/
var $row_checks = $('tbody input:checkbox');

$row_checks.change(function() {
    var thisChecked = this.checked, main_checked;
    if (!thisChecked) {
        main_checked = false;
    } else {
        main_checked = $row_checks.length == $row_checks.filter(':checked').length;
    }
    $main_check.prop('checked', main_checked);
});