ASP.net MVC Set Checkboxes to checked Clientside

Question

Hi All, 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

The easiest way to do this is to use jQuery. With the right selector it's pretty much a one liner. I don't know how much you know about jQuery so here's a link to the selector docs if you want to read up:

http://api.jquery.com/category/selectors/

The selector will depend on the layout of your page. I've done it before using something like this:

$("#tableId tr td input:checkbox").attr("checked", true);

In this example all checkboxes within a table with an id of "tableId" are checked

Answer 2

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);
});

Answer 3

you can create a delegate (jquery) for all the checkboxes once you've done the answer above. with something like to perform an action for each check box:

$('div.myGridDivClass tbody').delegate(':checkbox', 'click', function(){

            var $checkedRow = $(this), $row = $checkedRow.closest('tr')
// check row is checked
// toggleclass for checked css class and apply to the $row or whatever u want
// do something here
});