checkboxЫ в виде таблицы. как?

Задумался о том, что бы чекбоксы в форме сделать не в виде обычных "галочек в квадратиках", а в виде таблицы с подсвечиванием ячеек. То есть: таблица с ячейками, где каждая ячейка - свой чекбокс. При загрузке страницы выводится к примеру десять ячеек, неподсвеченных. Мы нажимаем на одну из ячеек - она меняет цвет и в случае нажатия "сабмит" - отправляет значение, как обычно в таких случаях с сабмитами происходит ))
Просто гораздо удобнее пользователю будет, если нужно отметить в списке определенные записи так, чек тыкать в обычные чекбоксы. Да и красивее. Возможно, такое уже где-то и реализовывалось, но я не нашел ((

1 ответов


Можно просто обработчик сделать, который по нажатию на строку таблицы "нажимает" чекбокс настоящий, но невидимый и подсвечивает либо снимает выделение.


Верно советуют сделать невидимый чекбокс.
Дополню примером на jQuery


Если есть таблица...


<table>
<tr>
<td><input type='checkbox' id=1 name='name_1' class='chekc_liist' /></td>
<td>test1</td>
</tr>
<tr>
<td><input type='checkbox' id=2 name='name_2' class='chekc_liist' /></td>
<td>test2</td>
</tr>
<tr>
<td><input type='checkbox' id=3 name='name_3' class='chekc_liist' /></td>
<td>test3</td>
</tr>
</table>
 

$('.chekc_liist').liee('click', function(){ //при клике по чекбоксу
if($(this).val() == 'checked') //проверяем выделен ли он
{
    $(this).parents('tr').addClass('check_row'); //усли чекед добавляем клас подсветки строки
}
} );