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

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

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

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

JQuery плагин

(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);
JS

Применение

<table class="table table-bordered">
	<thead>
		<tr>
			<th style="text-align:center;"><input type="checkbox"></th>
			<th>Дата</th>
			<th>Переходы</th>
			<th>Затраты</th>
			<th>Удалить</th>
		</tr>	
	</thead>
	<tbody>
		<tr>
			<td style="text-align:center;"><input type="checkbox"></td>
			<td>11.12.2015</td>
			<td>0 шт.</td>
			<td>0 руб.</td>
	  		<td><a href="#">Удалить</a></td>
		</tr>	
		<tr>
			<td style="text-align:center;"><input type="checkbox"></td>
			<td>12.12.2015</td>
			<td>56 шт.</td>
			<td>1245 руб.</td>
	 		<td><a href="#">Удалить</a></td>
		</tr>	
		<tr>
			<td style="text-align:center;"><input type="checkbox"></td>
			<td>13.12.2015</td>
			<td>45 шт.</td>
			<td>845 руб.</td>
			<td><a href="#">Удалить</a></td>
		</tr>	
		<tr>
			<td style="text-align:center;"><input type="checkbox"></td>
			<td>14.12.2015</td>
			<td>1 шт.</td>
			<td>100 руб.</td>
			<td><a href="#">Удалить</a></td>
		</tr>			
	</tbody>
</table>

<script>
$('.table').checkboxTable();
</script>
HTML

Результат

11.12.2016, обновлено 16.10.2019
11165

Комментарии

, чтобы добавить комментарий.

Другие публикации

PHP функции для checked и selected
Две мини функции которые облегчают выделения полей select, radio и checkbox до и после отправки форм.
17376
+3
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
73982
+3
Селект с чекбоксами
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
36546
+10
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43648
+34
Select option с ссылками
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
24715
+9
Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
31686
+4