Monday, November 16, 2009

"SelectAll" CheckBox in GridView using jQuery

Here is a way to do it:


/**
* Register logic for "select all" check box and the group of check boxes
* for each data row.
*
* @param {Object} chkAllSelector jQuery selector to find the "select all" check box
* @param {Object} chkItemSelector jQuery selector to find the check boxes for all the rows
*/

function registerSelectAll(chkAllSelector, chkItemSelector) {
//"select all" checkbox
var checkAllBox = $(chkAllSelector);
//checkbox for each row
var checkItems = $(chkItemSelector);

//check/uncheck all rows if "select all" is clicked
checkAllBox.bind("click", function(){
checkItems.each(function(){
this.checked = checkAllBox[0].checked;
})
});

//uncheck "select all" if some rows are unchecked
checkItems.bind("click", function(){
if(this.checked === false) {
checkAllBox[0].checked = false;
}
});
}


To use it:

registerSelectAll(".chkAllHeader input", ".chkItem input");

No comments: