Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jQuery. выбор всех checkbox в таблице

Автор: Gold Dragon 25.1.2012, 08:44

Есть таблица. В каждой ячейки есть checkbox. Это таблица для установки прав группам пользователей на сайт. В настоящий момент выбор осуществляется каждого checkbox, но это не совсем удобно. Я решил добавить возможность выбора "всего столбца" и "всей строки". Таким образом необходимо в таблице в самой верхней строке расположить checkbox`ы при выборе одного из которых будет выбираться все в этом столбце. И в последнем столбце расположить checkbox`ы при выборе одного из которых будет выбираться все в строке. Соответственно при отмене, отменяется вся строка или столбец Как такое можно реализовать если не присваивать идентификатор каждому TD или TD?

Автор: $дмитрий 25.1.2012, 12:17

Покажи примерный html

Автор: Gold Dragon 25.1.2012, 12:33

ну а что тут показывать, я уже всё описал, простая таблица Код <table class="adminlist" width="100%">     <tr>         <th></th>         <th>Guest <input type="checkbox" /></th>         <th>Registered <input type="checkbox" /></th>         <th>Author <input type="checkbox" /></th>         <th>Editor <input type="checkbox" /></th>         <th>Publisher <input type="checkbox" /></th>         <th>Manager <input type="checkbox" /></th>         <th>Administrator <input type="checkbox" /></th>         <th>Super Administrator <input type="checkbox" /></th>     </tr>     <tr>         <td>Просмотр всего контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Просмотр страницы категории <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Просмотр своего контента в категории <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Просмотр всего контента категории <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Создание контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Редактирование своего контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Редактирование всего контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Удаление своего контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox" /></td>         <td align="center"><input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr>     <tr>         <td>Удаление всего контента <input type="checkbox" /></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>         <td align="center"><input type="checkbox"/></td>     </tr> </table>

Автор: z-END 25.1.2012, 12:51

Цитата(Gold Dragon @  25.1.2012,  09:44 ) Как такое можно реализовать если не присваивать идентификатор каждому TD или TD? юзай селектор nthChild

Автор: Gold Dragon 25.1.2012, 12:53

Цитата(z-END @  25.1.2012,  13:51 ) юзай селектор nthChild да вот в нём и запутался... Если никто решение не предложит, тогда я вечерком попробую свой корявый код показать

Автор: ksnk 25.1.2012, 12:57

Код $('table.adminlist tr')     .find('td input:checkbox:eq(0)').change(function(){         $(this).closest('tr').find('input:checkbox').not(this)             [$(this).attr('checked')?'attr':'removeAttr']             ('checked','checked')     }) $('table.adminlist tr:eq(0)')     .find('input:checkbox').change(function(){         var col=$(this).parent('th').prevAll().length,             func=$(this).attr('checked')?'attr':'removeAttr';         $(this).closest('table').find('tr').each(function(){             $('td input:checkbox',this).eq(col)             [func]('checked','checked')         })   })

Автор: $дмитрий 25.1.2012, 13:50

Код $(function(){     $('.adminlist td:first-child input').click(function(){         $('input', $(this).parents('tr'))[$(this).attr('checked')?'attr':'removeAttr']('checked','checked');     });     th = $('.adminlist th input');     th.click(function(t){          $('.adminlist td:nth-child('+(th.index(this)+2)+') input')[$(this).attr('checked')?'attr':'removeAttr']('checked','checked');     }); });

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)