JS/jQuery

Отметить или снять все чекбоксы в таблице

Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку таблицы.

У таблицы должны быть теги <thead> и <tbody>, по ним плагин определяет где находится управляющий чекбокс.

Пример

Дата Переходы Затраты Удалить
11.12.2015 0 шт. 0 руб. Удалить
12.12.2015 56 шт. 1245 руб. Удалить
13.12.2015 45 шт. 845 руб. Удалить
14.12.2015 1 шт. 100 руб. Удалить
Дата Переходы Затраты Удалить
11.12.2015 0 шт. 0 руб. Удалить
12.12.2015 56 шт. 1245 руб. Удалить
13.12.2015 45 шт. 845 руб. Удалить
14.12.2015 1 шт. 100 руб. Удалить

JS код плагина

(function($){
    $.fn.checkboxTable = function() {
    target = this;

    // Клик по checkbox в шапке таблицы.
    $(target).on('click', 'thead :checkbox', function() {
        var check = this;
        $(this).parents('table').find('tbody :checkbox').each(function(){
            if ($(check).is(':checked')) {
                $(this).prop('checked', true);
                $(this).parents('tr').addClass('selected');
            } else {
                $(this).prop('checked', false);
                $(this).parents('tr').removeClass('selected');
            }
        });
    });

    // Клик по checkbox в строке таблицы.
    $(target).on('click', 'tbody :checkbox', function() {
        var parents = $(this).parents('table');
            if ($(this).is(':checked')) {
                $(this).parents('tr').addClass('selected');
                $(parents).find('thead :checkbox').prop('checked', true);
            } else {
                $(this).parents('tr').removeClass('selected');
                if ($(parents).find('tbody :checkbox:checked').length == 0) {
                    $(parents).find('thead :checkbox').prop('checked', false);
                }
            }
        });

        // Клик по строке таблицы
        $(target).on('click', 'tbody tr', function(event) {
            if (event.target.tagName == 'TH' || event.target.tagName == 'TD'){
                $(this).find(':checkbox').trigger('click');
            }
        });
    };
})(jQuery);

$('.table').checkboxTable();
11 декабря 2016