Цитируя сайт, откуда я хотел взять решение:
На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.
Действительно это наверное распространенная задача переключать checkbox и она как нельзя лучше решается с помощью jQuery.
Предложенный на том сайте метод у меня почему-то не работал.
1 2 3 4 5 6 7 8 |
function toggleAll() { var allCheckboxes = $("#checkboxes input:checkbox:enabled"); var notChecked = allCheckboxes.not(':checked'); allCheckboxes.removeAttr('checked'); notChecked.attr('checked', 'checked'); } |
Может быть дело в том, что прошло уже 4 года и что-то изменилось в jQuery или в браузерах. Баг был в том, что когда был клик на чекбоксе, то это событие шло впереди события jQuery click и checkbox уже считался отмеченным. Соответсвенно по логике ф-ии сначала выбираются все чекбосы и все не отмеченные. Потом все делаются не отмеченными, а бывшие не отмеченные – отмеченными. Но по клику чекбокс уже считался отмеченным и не попадал в не отмеченные и не отмечался после.
Вот мое работающее решение:
1 2 3 4 5 6 7 8 |
$(".checkboxes input:checkbox:enabled").click(function() { var top = $(this).parent(); var allCheckboxes = top.find("input:checkbox:enabled"); allCheckboxes.removeAttr('checked'); $(this).attr('checked', 'checked'); }); |
В данном случае сначала выбираются все чекбоксы на странице. На них вешается ф-я выполняющаяся по click. По клику на чекбокс (не на div, это важно и это и приводило к багу в примере выше) мы поднимаемся на верхний уровень в div (var top = $(this).parent()). Далее ищем все чекбоксы в текущем div и делаем их не отмеченными, а тот checkbox на который мы нажали – отмеченным.
Мой пример отличается тем, что я делаю отмеченным только нажатый чекбокс. В моем случае их просто всегда было два и надо было переключаться между ними. Чтобы инвертировать все чекбоксы можно дописать ф-ю на основе предыдущего примера:
1 2 3 4 5 6 7 8 9 |
$(".checkboxes input:checkbox:enabled").click(function() { var top = $(this).parent(); var allCheckboxes = top.find("input:checkbox:enabled"); var notChecked = allCheckboxes.not(':checked'); allCheckboxes.removeAttr('checked'); notChecked.attr('checked', 'checked'); }); |
Должно работать. :)