Цитируя сайт, откуда я хотел взять решение:

На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.

Действительно это наверное распространенная задача переключать checkbox и она как нельзя лучше решается с помощью jQuery.


Предложенный на том сайте метод у меня почему-то не работал.

Может быть дело в том, что прошло уже 4 года и что-то изменилось в jQuery или в браузерах. Баг был в том, что когда был клик на чекбоксе, то это событие шло впереди события jQuery click и checkbox уже считался отмеченным. Соответсвенно по логике ф-ии сначала выбираются все чекбосы и все не отмеченные. Потом все делаются не отмеченными, а бывшие не отмеченные – отмеченными. Но по клику чекбокс уже считался отмеченным и не попадал в не отмеченные и не отмечался после.

Вот мое работающее решение:

В данном случае сначала выбираются все чекбоксы на странице. На них вешается ф-я выполняющаяся по click. По клику на чекбокс (не на div, это важно и это и приводило к багу в примере выше) мы поднимаемся на верхний уровень в div (var top = $(this).parent()). Далее ищем все чекбоксы в текущем div и делаем их не отмеченными, а тот checkbox на который мы нажали – отмеченным.

Мой пример отличается тем, что я делаю отмеченным только нажатый чекбокс. В моем случае их просто всегда было два и надо было переключаться между ними. Чтобы инвертировать все чекбоксы можно дописать ф-ю на основе предыдущего примера:

Должно работать. :)

Сразу напишу, что в jQuery я дилетант. Я понимаю его принципы работы, могу что-то исправить в коде, построить код на основе имеющихся плагинов, понять код – но я не разработчик в этом направлении и вообще не люблю JS. Но вот мне понадобился confirm на jQuery и меня понесло в дебри “готовых” плагинов.

Все оказалось не так просто. Для меня jQuery это удобство. Выбрал элементы, к которым прицепить плагин, залил файлы и оно работает. Но не всегда получается так. Вроде все залил, указал элементы по ид и классам, настроил плагин, залил стили, а нифига не работает.

Для конфирма я рассмотрел 3 плагина и на 3-м мне повезло.

1. Раскрученная и первая страница с англоязычного сайта туториалов, как я понял. Есть ее переводы на русском. У этого чуда нет названия, просто туториал – как создать confirm диалог на jQuery. Вот ссылки:
http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
и на русском

У меня это чудо не заработало. Вроде просто и понятно написано, вроде прикрутил все правильно, но в итоге окно с confirm появлялось до нажатия ссылки, сразу по загрузке. В нем были кривые стили и его никак нельзя было убрать. Все сделал по инструкции, что не так? Забил.

2. http://habrahabr.ru/post/48318/ автор представляет тут jquery alert dialogs. При чем ни где, ни в посте, ни в блоге своем не дал ссылку на источник и загрузку. Я ее нашел, вот она:
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/ 

вызывается как-то так, не работает без callback ф-ии.

В плагине используется вроде бы как устаревший druggable плагин, хотя я нашел его в последней UI сборке. Прикрутил все как надо. В итоге по нажатию на ссылку confirm появлялся, и тут же сам себя подтверждал. :)

Кстати у обоих плагинов выше одна проблема – они реагировали только на одну ссылку с ид. Если на странице много ссылок с одним ид или классом, на них плагин уже не вызывался.

3. Вот он confirm плагин моей мечты –

jQuery Easy Confirm Dialog

Сразу ссылки:
Примеры: http://projectshadowlight.org/jquery-easy-confirm-dialog/
Плагин на github: https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin

Это действительно работает и это то, что надо. Используются стили UI. Я пометил класс alert_link как класс плагина и все ссылки на всех страницах с этим классом теперь имеют confirm диалог. Это то, что мне было нужно.
Плагин удобен, имеет настройки.

Вот так можно выполнить какой-то экшн в js после confirm если указать кроме класса ид элемента.

Вот так настраивается сообщение:

В общем мой выбор.