Заполнение ячейки таблицы в зависимости от четбоксов

@Kristofkadavr · Регистрация: 29.03.2016

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

Здравствуйте.

В зависимости от выбранного четбокса надо будет в ОДНУ ячейку таблицы ( c id="man" вставить одно или несколько строк данных о человеке (в зависимости от выбранного чекбокса), при этом призагрузки страницы по умолчанию эта ячейка пустая:
Ладыгин - "Ладыгин С., телефон 111"
Марюхин - "Марюхин С. телефон 222"
Самохин - "Самохин С. телефон 333"
Шкакин - "Шкакин С. телефон 444"

Если выбран один четбокс - одна запись-строка в ячейке, если выбрано два - две строчки в одной ячейке (с id="man")..Если убрать четбоскы - ячейка очищается. Я ничего кроме innerHTML+= ничего не придумал... но в этом случае очищать не получилось, да и с разных строк не поучается вставлять. Может кто подсказать, в каком направлении двигаться? Только начал изучать JS

HTML5
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
<table>
    <tr>
        <td>Дата:</td>
        <td></td>
    </tr>
    <tr>
        <td>Время:</td>
        <td > : MSK</td>
    </tr>
    <tr>
        <td>Работы проводятся на системе:</td>
        <td></td> 
    </tr>
    <tr>
        <td>Влияние на:</td>
        <td></td>
    </tr>
    <tr>
        <td>Тип работ:</td>
        <td></td>
    </tr>
    <tr>
        <td>Контактные лица:</td>
        <td id="man"></td> <!--СЮДА НАДО БУДЕТ ВСТАВЛЯТЬ ОДНО / НЕСКОЛЬКО ЗНАЧЕНИЙ В  ЗАВИСИМОСТИ ОТ ЧЕКБОКСА(ОВ) -->
    </tr>
</table>
 
<p>Дежурный:</p>
<input type="checkbox" name="dej"  id="ladygin">
<label for="ladygin">Ладыгин С.</label> 
 
<input type="checkbox" name="dej"  id="maruhin">
<label for="maruhin">Марюхин С.</label> 
 
<input type="checkbox" name="dej"  id="samohin">
<label for="samohin">Самохин С.</label>
 
<input type="checkbox" name="dej"  id="shkakin">
<label for="shkakin">Шкакин С.</label>

@Lazy_Den · 07.04.2016, 09:25

Kristofkadavr, при каждом изменении состояния checkbox-а, бежим циклом по всем, собирая данные тех, которые отмечены и выводим информацию на экран. Алгоритм - прост.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var chbx = document.querySelectorAll('input[name=dej]'),
    man = document.getElementById('man');
 
function addPerson() {
    var pers = [];
    [].forEach.call(chbx, function(el) {
        if (el.checked) {
            pers.push(el.nextElementSibling.textContent);
        }
    });
    man.innerHTML = pers.join('<br>');
}
 
[].forEach.call(chbx, function(el) {
    el.addEventListener('change', addPerson, false);
});

@Kristofkadavr · 07.04.2016, 19:29 **[ТС]**

Lazy_Den, спасибо огромное!

@kalabuni · 14.06.2019, 09:46

Сообщение от Kristofkadavr

ничего не придумал...

не скромничайте!
вы новое слово придумали -- "четбокс", прям как Успенский "Чебурашку"

<input type="checkbox"> называется чекбоксом

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Kristofkadavr 0 / 0 / 1 Регистрация: 29.03.2016 Сообщений: 50
	07.04.2016, 19:29 [ТС]
	Lazy_Den, спасибо огромное! 0

Заполнение ячейки таблицы в зависимости от четбоксов

Решение