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

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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.