Question

My situation is: Im making a simple inbox page. The inbox is a listing made from a DevExpress grid. Each row in the grid has a checkbox that the user can check so that they can multi delete records (similar to yahoo mail etc).

When the user clicks the select all link or the clear all link i need to set all the checkboxes within the grid to be checked or unchecked. How do I go about this with client-side scripting? Thanks

Answer 1

Using jquery it should be pretty easy- assuming you can use one of the selectors to select all of the checkboxes (take a look at the different jquery selectors http://api.jquery.com/category/selectors/).

Attach a toggle handler:

$('Selector for the "select all" checkbox>').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});

Select all checkboxes and when toggled switch the checked state of the other checkboxes:

$('<Selector for the ones you want to toggle>').attr('checked', true);

Provide some sample HTML, or a link to a page, if you need further help.

So putting it together, assuming your “select all” checkbox had an ID of “uxSelectAll” and the ones you want to change have a CSS class of “checkbox-mail-items” it would be something like:

$('#uxSelectAll').toggle(function() {
  $('.checkbox-mail-items').attr('checked', true);
}, function() {
  $('.checkbox-mail-items').attr('checked', false);
});