Групповой чекбокс

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

В списке групп и товаров в каждой строке имеется чекбокс (скриншот), позволяющий пометить эту строку для удаления.

А внизу имеется чекбокс, клик по которому позволяет выбрать все строки. Как осуществляется такой выбор, каким кодом?

@koza4ok · 14.11.2012, 14:18

Все просто по событию проверяем если групповой флажок активирован

JavaScript
1
2
3
if(elem.checked){
 
}

Делаем перебор всех остальных флажков(проще объединить по какому нибудь атрибуту или классу) и ставим им также cheched.

JavaScript
1
2
3
4
5
6
7
8
9
if(elem.checked){
  for(){
//перебор флажков element.checked='true'
}
}else{
for(){
//перебор флажков element.checked='false'
}
}

@vlad-55 · 25.11.2012, 13:10 **[ТС]**

Реально это как-то не получилось...

Структура кода такова:

HTML5
1
2
3
4
5
6
<input type="checkbox" name="tov_1">
<input type="checkbox" name="tov_2">
. . .
<input type="checkbox" name="tov_100">
 
<input type="checkbox" name="vse">

Здесь первые строки для индивидуального выбора, а последняя строка для выбора всех.

Вот как конкретно сделать, чтобы это заработало?

@GuardCat · 25.11.2012, 15:22

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <title>Checkboxes</title>
    </head>
    <body>
      <fieldset title = "Group">
        <input type = "checkbox" name = "ttt">
        <input type = "checkbox" name = "t">
        <input type = "checkbox" name = "ttut">
        <input type = "checkbox" name = "ttyt">
        <input type = "checkbox" name = "ttth">
        <input type = "checkbox" name = "tt">
        
        <label>
          <input type = "checkbox" name = "all">
        All
      </label>
      </fieldset>
        <script>
          /**
            Функция makeChain связывает группу чекбоксов с одним, управляющим их состоянием.
            Принимает любй тэг, содержащий чекбоксы и один, главный, чекбокс
            ie8+
          */
     makeChain = function( groupOfCheckboxes, masterCheckbox ) {
       groupOfCheckboxes = groupOfCheckboxes.querySelectorAll( "input[type=checkbox]" );
       
       masterCheckbox.onclick = function () {
         for (var x in groupOfCheckboxes) {
           groupOfCheckboxes[x].checked = masterCheckbox.checked
         }
       }
       
     }
     
    // Пример использования
    makeChain( document.querySelector( "fieldset" ), document.getElementsByName("all")[0])
        </script>
    </body>
</html>

Проверялось в Opera mobile

@vlad-55 · 25.11.2012, 20:41 **[ТС]**

Гениально!

И во всех браузерах работает!

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787

	Групповой чекбокс 14.11.2012, 12:15. Показов 2447. Ответов 4 Метки нет (Все метки) В списке групп и товаров в каждой строке имеется чекбокс (скриншот), позволяющий пометить эту строку для удаления. А внизу имеется чекбокс, клик по которому позволяет выбрать все строки. Как осуществляется такой выбор, каким кодом? Миниатюры 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	25.11.2012, 20:41 [ТС]
	Гениально! И во всех браузерах работает! Спасибо! 0