ASP.net MVC Установите флажки для проверенных клиентов

Question

Моя ситуация такова: я делаю простую страницу входящих сообщений. Входящие являются списком, сделанным из сетки DevExpress. У каждой строки в сетке есть флажок, который пользователь может установить, чтобы он мог многократно удалять записи (аналогично почте Yahoo и т. Д.).

Когда пользователь нажимает на ссылку «Выбрать все» или «Очистить все», мне нужно установить все флажки в сетке, которые будут отмечены или отключены. Как мне сделать это с помощью сценариев на стороне клиента? Спасибо

Answer 1

Самый простой способ сделать это - использовать jQuery. С правильным селектором это в значительной степени один вкладыш. Я не знаю, сколько вы знаете о jQuery, так что вот ссылка на документы селектора, если вы хотите прочитать:

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

Выбор будет зависеть от макета вашей страницы. Я сделал это, прежде чем использовать что-то вроде этого:

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

В этом примере установлены все флажки в таблице с идентификатором "tableId"

Answer 2

вы можете создать делегат (jquery) для всех флажков, как только вы сделали ответ выше. с чем-то вроде выполнения действия для каждого флажка:

$('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
});

Answer 3

Используя jquery, это должно быть довольно легко - при условии, что вы можете использовать один из селекторов, чтобы выбрать все флажки (взгляните на различные селекторы jquery http://api.jquery.com/category/selectors/).

Прикрепить тумблерный обработчик:

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

Установите все флажки и при переключении переключите проверенное состояние других флажков:

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

Укажите пример HTML-кода или ссылку на страницу, если вам нужна дополнительная помощь.

Итак, собрав его вместе, предположим, что ваш флажок «выбрать все» имеет идентификатор «uxSelectAll», а те, которые вы хотите изменить, имеют класс CSS «checkbox-mail-items», это будет что-то вроде:

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