Работа через jQuery с checkbox

Важность работы jQuery checkbox исходит из того, что благодаря этим элементам (чекбоксам в виде квадратиков с галочкой или без нее) выполняются многие манипуляции с данными отображаемой на странице таблицы, а также вносятся соответствующие изменения в БД. По большому счету никакая работа с БД через интерфейс пользователя без использования таких управляющих элементов будет невозможна. Далее — коротко о том, как все сделать, чтобы оно заработало.

В связи с этим и возникает необходимость проверить состояние того или иного checkbox через jQuery, чтобы после этого выполнить определенные манипуляции – с самой таблицей или с базой данных. Для ясности и наглядности того, как все работает, дадим себе условное ТЗ, требующее наличия определенного функционала:

• Есть html таблица (тег <table>), выведенная на страницу из базы данных.
• Первая колонка таблицы содержит checkbox’ы, с которыми нужно работать через jQuery.
• Делать отметку чекбоксов можно как по отдельности, так и всех сразу.
• В первой строке таблицы в первой колонке также находится checkbox (назовем его главным), отметка которого и вызывает смену состояния всей группы этих элементов управления.

Для решения задачи применим такую конструкцию:

if(!$(this).prop('checked'))

Таким образом, мы делаем через jQuery проверку checkbox. При этом можно сослаться на него как через this, так и через селектор (id или class). Как это выглядит на практике:

$( document ).ready(function() {
	$("#chk_sel_all").click(function(){ //вешаем обработчик события «click» на главный чекбокс, отвечающий за отметку остальных элементов в таблице
		if(!$(this).prop('checked')){ // если состояние чекбокса <> 'checked', то
			jQuery(".mytbl").each(function() { // для каждого элемента таблицы с «class=mytbl»
				jQuery(this).find(".chk_sel_prod").prop("checked",false); // ищем чекбоксы (у которых одинаковый класс) и снимаем с них галочку.
			});
		} else { // иначе
			jQuery(".mytbl").each(function() { // действуем наоборот
				jQuery(this).find(".chk_sel_prod").prop("checked", true);
			});
		}
	});
});

Немного позже добавлю пример того, как jquery работает c checkbox.

А пока можете ознакомиться как можно сделать галерею лайтбоксом на jQuery.