Переключение чекбоксов с помощью jQuery – инвертировать checkbox

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

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

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


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

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

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

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

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

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