Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Авто-селект чекбоксов в таблице (https://javascript.ru/forum/jquery/11582-avto-selekt-chekboksov-v-tablice.html)

alexey_spb 01.09.2010 15:30

Авто-селект чекбоксов в таблице
 
Прошу прощения, вопрос наверняка очень элементарный.
Но я только сейчас начал изучать jQuery (а также JS и CSS).


Я думаю, что знатоки мне сразу же дадут ответ, т.к. задача стандартная.

Постановка задачи:
Есть таблица, в которой надо реализовать функционал чекбокса "выбрать все". Т.е. стандартно, в шапке есть чекбокс, если его выбрать, то все чекбоксы данного столбца автоматически тоже должны ставиться в checked == true.

Предложенное мною решение:
1. На чек-бокс в шапке таблицы вешаем JS-функцию
2. Ко всем нужным чекбоксам внутри таблицы цепляем пустой класс (чтобы можно было впоследствии их идентифицировать по имени этого класса).

В итоге, JS-функция выглядит следующим образом:

function selectAllRows(param) {
 jQuery('.columnCheckBoxStyleClass').each(function() {this.checked = param});
}


Возникшая проблема:
Всё прекрасно работает до тех пор, пока на странице всего одна такая таблица. Но когда на странице таких таблиц две, то при нажатии на чекбокс в одной из таблиц происходит выборка строк сразу в двух таблицах.
Решение тут напрашивается следующее, при вызове функции необходимо передавать id таблицы, в которой надо оперировать со строками. Но вот КАК и ЧТО делать с этим id таблицы, я не знаю, т.к. jQuery только начал изучать.

Вопрос:
Как преобразовать тело функции, чтобы имея на входе 2 параметра (id таблицы и проставляемый параметр в чекбоксы), проставить/убрать галки с чекбоксов только требуемой таблицы?

Спасибо за помощь :)

inGray 01.09.2010 15:34

$('#idnaблицы.columnCheckBoxStyleClass')

alexey_spb 01.09.2010 16:16

Вот блиииин :-E

Дело в том, что я использую не голый HTML, а JSF.
Поэтому на клиент выплевывается HTML c айдишником таблицы вот в таком формате: 'formId:tableId'. Т.е. всё, что находится в кавычках - это и есть айдишник таблицы.

И когда в JS пытается выполниться вот такое:
jQuery('ormId:tableId.columnCheckBoxStyleClass').each(function() {this.checked = param});

То в консоль выдается сообщение: "Неизвестный псевдокласс или псевдоэлемент «tableId»."

exec 02.09.2010 06:31

Может так:

jQuery('[id="formId:tableId"].columnCheckBoxStyleClass').each(function() {this.checked = param});


или

jQuery(document.getElementById('formId:tableId')).filter('.columnCheckBoxStyleClass').each(function() {this.checked = param});

alexey_spb 02.09.2010 13:18

Спасибо, exec.
Оба предложенных варианта не работают, но они меня подтолкнули к одной мысли, начал экспериментировать и в итоге нашел правильное решение.

Вот так все корректно работает:
function selectAllRows(rootElementId,param) {
 jQuery('.columnCheckBoxStyleClass', document.getElementById(rootElementId)).each(function() {this.checked = param});
}


Но насколько это "правильное" решение, я не знаю. Может быть кто-нибудь прокомментирует на предмет оптимальности того, как я предлагаю?


Часовой пояс GMT +3, время: 17:03.