Групповой выбор checkbox'ов на JavaScript
Групповой выбор checkbox'ов на JavaScript
В некоторых пользовательских интерфейсах в рабочих проектах приходится сталкиваться с длинными таблицами. Одна из колонок в такой таблице - чекбокс, которым отмечаются строки, с которыми надо выполнить то или иное действие. При выборе пары-тройки чекбоксов проблем не возникает, один клик - один чекбокс. В шапке колонки есть мастер-чекбокс, с помощью которого можно отметить все или снять все галочки. А вот при необходимости отметить не все, но просто большое количество чекбоксов начинаются сложности. По одному делать это долго. Но ведь даже в стандартном Проводнике есть возможность выбирать последовательность файлов, отмечая чекбоксы с зажатой клавишей Shift. Такая идея мне понравилась и я перенес ее на веб-страницы.
Начнем с верстки строк таблицы. Они должны иметь примерно такой вид. Атрибут id имеет значение в формате "chk_#", где счетчик начинается с 1 и увеличивается на каждой строке. Обработчик устанавливается на событие click. Для удобства восприятия я прописал обработчики inline, в рабочем коде, конечно, это все назначается динамически.
Code (HTML) : Убрать нумерацию
- <tr>
- <td><input type="checkbox" id="chk_1" onclick="chk_checkbox(1, event);"/></td>
- <td>Checkbox 1</td>
- </tr>
- <tr>
- <td><input type="checkbox" id="chk_2" onclick="chk_checkbox(2, event);"/></td>
- <td>Checkbox 2</td>
- </tr>
- <tr>
- <td><input type="checkbox" id="chk_3" onclick="chk_checkbox(3, event);"/></td>
- <td>Checkbox 3</td>
- </tr>
Code (JavaScript) : Убрать нумерацию
- // Последняя нажатая галочка
- var old_chk=0;
- function chk_checkbox(num, event) {
- var el=document.getElementById('chk_'+num);
- // Чекбокс активирован?
- if (el && el.checked) {
- // Клавиша Shift нажата?
- if (event.shiftKey) {
- if (old_chk!=0) {
- // При необходимости поменять границы
- if (num<old_chk) {
- var tmp=old_chk;
- old_chk=num;
- num=tmp;
- }
- // Проставить все галочки в диапазоне
- for(var i=old_chk; i<=num; i++) {
- el=document.getElementById('chk_'+i);
- if (el) {
- el.checked=true;
- }
- else {
- break;
- }
- }
- // Новое начало диапазона
- old_chk=num;
- }
- }
- else {
- // Новое начало диапазона
- old_chk=num;
- }
- }
- else {
- // Сбросить границу диапазона
- old_chk=0;
- }
- }
Ну и чтобы два раза не вставать, вот верстка и обработчик мастер-чекбокса, который снимает или устанавливает галочки на всех чекбоксах.
Code (HTML) : Убрать нумерацию
- <table>
- <tr>
- <th><input type="checkbox" id="group_select" onclick="chk_all();"/></th>
- <th>Header</th>
- <th>Some data</th>
- <th>Text</th>
- </tr>
Code (JavaScript) : Убрать нумерацию
- function chk_all() {
- var i=1;
- var el;
- // Получить состояние мастер-чекбокса
- var chk=document.getElementById('group_select').checked;
- // Привести все чекбоксы к состоянию мастер-чекбокса
- while (el=document.getElementById('chk_'+i)) {
- el.checked=chk;
- i++;
- }
- }
Просмотров: 348 | Комментариев: 9
Метки: JavaScript, оформление сайта
Комментарии
Отзывы посетителей сайта о статье
Ирина
(02.11.2024 в 09:50):
Спасибо большое за Ваше внимание!
ManHunter
(01.11.2024 в 22:25):
Обратиться к разработчикам этой чудо-системы, пусть исправляют свои косяки. Других вариантов тут не может быть.
Ирина
(01.11.2024 в 22:24):
Спасибо за ответ!
А что можно сделать, подскажите, пожалуйста.
А что можно сделать, подскажите, пожалуйста.
ManHunter
(01.11.2024 в 11:06):
Это ничем не поможет, тем более в приведенном фрагменте вообще нет ни единого чекбокса.
Ирина
(01.11.2024 в 07:45):
Здравствуйте!
Я не программист и ничего в этом не понимаю.
Но, мне нужна Ваша помощь.
В кратце: в браузере (яндекс) расписываю документы в системе электронного документооборота, на странице отображается список из 50 документов (в виде строк), на каждой строке есть "галочка" (чек-бокс), которую можно проставить на нужных документах и создать одинаковую резолюцию по группе выделенных документов. Т.к. документов очень много, они типовые, резолюции по ним одинаковые, то я бы хотела выбирать единоразово все 50 галочек на странице и создавать резолюцию.
Но, проблема в том, что галочки выбираются только кликом. Советы про удержание кнопки shift и выделением диапазона галочек - не помогают.
Начиталась всякого в интернете и поняла, что на странице, видимо, какой блок стоит. В коде страницы нашла такие слова как selectByClick.
Я вообще не умею работать с яваскрипт. Пыталась по советам яндекса открыть консоль и вставить туда Ваши коды, ничего не вышло.
Но, наверняка, я что-то не правильно делаю.
Если Вас не затруднит, помогите, пожалуйста.
На меня падает тысячи документов в день и щелкать галочки устает рука, да и трата времени на щелкание удручает.
Спасибо большое!
<div id="Template_VerticalListStrategies_chooseEmailCorrespondents_Vie w">
<table>
<tr>
<td style="width:32px">
<div class="attr_checkBox"></div>
</td>
<td style="width: 18px" class="selectByClick">
<div class="attr_sourceType" style="height: 16px; width: 16px; margin-left: 5px"></div>
</td>
<td style="width: 100%; padding-right: 3px" class="selectByClick">
<span class="WbForm_AttributeValue attr_name"></span>
</td>
<td style="width: 32px; padding-right: 3px">
<div class="btn_edit"></div>
</td>
</tr>
</table>
</div>
Может быть это Вам поможет разобраться...
Я не программист и ничего в этом не понимаю.
Но, мне нужна Ваша помощь.
В кратце: в браузере (яндекс) расписываю документы в системе электронного документооборота, на странице отображается список из 50 документов (в виде строк), на каждой строке есть "галочка" (чек-бокс), которую можно проставить на нужных документах и создать одинаковую резолюцию по группе выделенных документов. Т.к. документов очень много, они типовые, резолюции по ним одинаковые, то я бы хотела выбирать единоразово все 50 галочек на странице и создавать резолюцию.
Но, проблема в том, что галочки выбираются только кликом. Советы про удержание кнопки shift и выделением диапазона галочек - не помогают.
Начиталась всякого в интернете и поняла, что на странице, видимо, какой блок стоит. В коде страницы нашла такие слова как selectByClick.
Я вообще не умею работать с яваскрипт. Пыталась по советам яндекса открыть консоль и вставить туда Ваши коды, ничего не вышло.
Но, наверняка, я что-то не правильно делаю.
Если Вас не затруднит, помогите, пожалуйста.
На меня падает тысячи документов в день и щелкать галочки устает рука, да и трата времени на щелкание удручает.
Спасибо большое!
<div id="Template_VerticalListStrategies_chooseEmailCorrespondents_Vie w">
<table>
<tr>
<td style="width:32px">
<div class="attr_checkBox"></div>
</td>
<td style="width: 18px" class="selectByClick">
<div class="attr_sourceType" style="height: 16px; width: 16px; margin-left: 5px"></div>
</td>
<td style="width: 100%; padding-right: 3px" class="selectByClick">
<span class="WbForm_AttributeValue attr_name"></span>
</td>
<td style="width: 32px; padding-right: 3px">
<div class="btn_edit"></div>
</td>
</tr>
</table>
</div>
Может быть это Вам поможет разобраться...
DiPrm
(30.07.2024 в 13:18):
Да, у каждого свои предпочтения. Главное, задумка хорошая!
ManHunter
(25.07.2024 в 21:13):
Ну я ж не претендую на истину в последней инстанции. Мне удобно именно в таком виде, если брать как основу, то можно наворотить как угодно.
DiPrm
(25.07.2024 в 17:19):
Немного доработал функционал. В строку 30 после скобки добавил old_chk = num. В функции chk_all обнулил old_chk. Теперь можно выбирать диапазон сразу с нажатой клавишей shift. Если сделать ресет чекбоксов, выбранный диапазон обнуляется. Так, мне кажется, удобнее.
DiPrm
(23.07.2024 в 22:28):
Спасибо, красивое решение! Особенно понравился код - перебор элементов при условии если такой элемент найден.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,693 раза
Поблагодарили 35,693 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |