Важность работы 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.