Страницы

Поиск по вопросам

суббота, 29 декабря 2018 г.

Чекбокс “Выбрать все” выбирает все чекбоксы, и наоборот

При выборе главного checkbox'а выбираются все остальные, привязанные к нему, и наоборот, при выборе всех привязанных выбирается и главный.
Реализовать необходимо так, чтобы можно было использовать несколько групп на странице в пределах одной формы.
Поэтому сейчас реализовано так: у главного checkbox'а есть id, который совпадает с классами зависимых checkbox'ов. Классы могут быть любые - главное что они совпадают с id главного checkbox'а.
Рабочий код можно посмотреть ниже, но он слишком массивный. Есть ли более элегантные решения, желательно легко модифицируемые?
$(document).on("change", "input[type=checkbox]", function() { // По изменению checkbox'а if ($(this).attr('class')) { var CBgroupID = $(this).attr('class'); } if (($(this).attr('id')) && ($('input[type="checkbox"].' + $(this).attr('id')).length)) { var CBgroupID = $(this).attr('id'); if (this.checked) { $('input[type="checkbox"].' + CBgroupID).attr('checked', 'checked'); $('input[type="button"][class*="' + CBgroupID + '"]').removeAttr('disabled'); } else { $('input[type="checkbox"].' + CBgroupID).removeAttr('checked'); $('input[type="button"][class*="' + CBgroupID+'"]').attr('disabled', 'disabled'); } } if (!CBgroupID) { return; } if ($('input[type="checkbox"].' + CBgroupID + ':not(:checked)').length) { $('input[type="checkbox"]#' + CBgroupID).removeAttr('checked'); } else { $('input[type="checkbox"]#' + CBgroupID).attr('checked', 'checked'); } if ($('input[type="checkbox"].' + CBgroupID+':checked').length) { $('input[type="button"][class*="' + CBgroupID + '"]').removeAttr('disabled'); } else { $('input[type="button"][class*="' + CBgroupID + '"]').attr('disabled', 'disabled'); } if ($('input[type="checkbox"].' + CBgroupID + ':checked').length === 1) { $('.jToEdit').removeAttr('disabled'); } else { $('.jToEdit').attr('disabled', 'disabled'); } delete CBgroupID; });

Группа 1

Общий


Группа 2

Общий



Пример в fiddle


Ответ

$(document).on('change', 'input[type=checkbox]', function () { var $this = $(this), $chks = $(document.getElementsByName(this.name)), $all = $chks.filter(".chk-all"); if ($this.hasClass('chk-all')) { $chks.prop('checked', $this.prop('checked')); } else switch ($chks.filter(":checked").length) { case +$all.prop('checked'): $all.prop('checked', false).prop('indeterminate', false); break; case $chks.length - !!$this.prop('checked'): $all.prop('checked', true).prop('indeterminate', false); break; default: $all.prop('indeterminate', true); } });


Комментариев нет:

Отправить комментарий