It has been a while since I have posted a new jQuery snippet, mostly because I only get to play with jQuery once in a while (though I wish I could use it more). Recently I had to create an administration page for deleting multiple rows of data. I presented the data in a gridview using checkboxes as the control for selecting which items will be deleted. I wanted to make it clear which items were going to be deleted so, using jQuery, I wrote the following snippet to accomplish what I wanted.

Obviously you will need to define a CSS class called “highlight”. I think the best thing about this snippet of code is that it will work if you are using a standard HTML table to organize your data or you are using a GridView object in ASP .NET. This snippet will also ignore the row that contains the “Select All” checkbox; for my purposes the select all checkbox was in the header of the table/grid.


$('#SurveyGrid input:not(#selectAll)').click(function () {
if ($(this).attr("checked") == true) {
$(this).parent().parent().addClass('highlight');
} else {
$(this).parent().parent().removeClass('highlight');
}
});

I have posted this code on snipplr.com (as usual).