Отображение чекбоксов в диалогах jQuery UI и предоставление кнопки Cancel

Я пытаюсь решить, вероятно, очень распространенную проблему и подготовил упрощенный тестовый пример, демонстрирующий ее и мои усилия.

Я пытаюсь отобразить несколько диалогов jQuery UI, каждый из которых содержит несколько одноименных чекбоксов (fruits и candy в моем тестовом коде ниже)

В каждом диалоге у меня есть 4 кнопки: Сохранить, Отменить, Выбрать все и Отменить выбор:

Первые 3 кнопки уже работают в моем коде.

Кнопка Обновить на самом деле вызовет функцию fnDraw() DataTable, эта часть тоже уже работает. (И я не хочу сохранять значения чекбоксов на сервере между ними, я хотел бы сделать все на стороне клиента - я знаю, это возможно).

Моя проблема заключается в реализации кнопки Cancel для диалогов:

1) Возможно, я должен сохранять список установленных в данный момент чекбоксов в событии открытия диалога? А затем восстанавливать их при нажатии Cancel? Есть ли какой-то элегантный jQuery-способ для этого?

2) Я не знаю, как обрабатывать только чекбоксы текущего открытого диалога.

Ниже приведен мой тестовый код, он работает мгновенно - благодаря Google CDN:

apple
banana
pear




toffee
fudge

UPDATE: Благодаря mootinator следующий код работает, но у меня все еще есть 2 небольших проблемы/вопроса:

1) Можно ли использовать событие open вместо пользовательского метода openDialog()?

2) Мои кнопки Deselect All и Select All изменяют все чекбоксы на странице - вместо того, чтобы изменять только те, которые принадлежат текущему диалогу. Интересно, как выбрать только последние? (как-то использовать $(this) в selectAll() и deselectAll())?

Я пробовал

function selectAll() {
        $($(this) + ' :checkbox').prop('checked', true);
}

function deselectAll() {
        $($(this) + ' :checkbox').prop('checked', false);
}

но получаю синтаксическую ошибку.

apple
banana
pear




toffee
fudge

UPDATE2: На самом деле у меня есть третья и более серьезная проблема: кнопка закрытия X в правом верхнем углу диалога не работает так, как должна (она сохраняет, а не отменяет).

Я пробовал добавить close: cancel, к обоим диалогам, но получаю ошибку времени выполнения в Chrome:

Uncaught RangeError: Maximum call stack size exceeded
f.event.remove
f.event.remove
f.fn.extend.unbind
a.extend.destroy
a.extend.destroy
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
e.extend.each
e.fn.e.each
a.widget.bridge.a.fn.(anonymous function)
cancel
a.Widget._trigger
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
.....etc....

UPDATE3: Возможно, потому что я вызываю $(this).dialog('close') в цикле?

Однако я не вижу простого способа исправить это: если я создаю отдельную функцию

function restore() {
        $(this).find(':checkbox').each(function() {
            $(this).prop('checked', $(this).data('XXX'));
        });
}

function cancel() {
        restore();
        $(this).dialog('close');
}

и передаю ее как close: restore диалогам, то кнопка Save ломается