Показать/скрыть элемент при клике на checkbox с одинаковыми id

@clickquit · Регистрация: 23.02.2021

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

Доброго времени суток друзья.

У меня есть много div элементов с одинаковым классом, я хочу их сортировать (показывать / скрывать) с помощью checkbox. Подскажите пожалуйста пример с data-*атрибутами или другое решение. Хочу сделать data-атрибут: data-score, чтобы при нажатии на checkbox отображались определенные div элементы score, при выключении был параметр noscore. Подскажите пожалуйста пример, как реализовать это.

HTML5
1
2
3
<label for="s1" class="show-score">Показать счет</label><input id="s1" class="chkb" type="checkbox" data-target="score">
 
<div class="block-score" data-score="">1:2</div><div class="block-score" data-noscore="">-</div>

Нужно еще сделать так что бы "<div class="block-score" мог быть внутри других <div> и это не влияло на работу checkbox.

На сайте нашел уже такой код, спросил у автора, он написал что он устарел
Показать/скрыть элемент при клике на checkbox с одинаковыми id

Буду благодарен если кто-то поможет в этом вопросе.

Спасибо.

@kalabuni · 24.02.2021, 00:08

clickquit, значение id должно быть уникальным на странице, сиречь, если имеется инпут с id="hren", то более никаких элементов (ни инпутов, ни спанов, ни дивов) с тем же id="hren" быть не может!

@clickquit · 24.02.2021, 01:15 **[ТС]**

Не понимаю о чем Вы. Причем здесь уникальное ID? ID будет только одно, так как ID используется в input для подключения к label. Дальше все в примере работает на основе data-target. Но проблема в том что должен быть <input сразу перед <div class="show-hide-score">, если поставить что-то внутрь то не будет работать.

Вот пример, что у меня получился.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <label for="s1" class="show-score">Показать счет</label>
    <input id="s1" class="chkb" type="checkbox" data-target="score">
    
<div class="show-hide-score">
  <div class="block" data-score="">1:2</div>
  <div class="block" data-noscore="">-</div>
  <div class="block" data-score="">3:1</div>
  <div class="block" data-noscore="">-</div>
</div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
.block{display: none;}
    [data-target="score"]:checked ~ .show-hide-score > [data-score]{
      display:block;} 
    [data-target="score"] ~ .show-hide-score > [data-noscore]{
      display:block;} 
   [data-target="score"]:checked ~ .show-hide-score > [data-noscore]{
      display:none;}
.show-score{cursor: pointer;}

Я сделал это на основании скрипта Показать/скрыть элемент при клике на checkbox с одинаковыми id. Но автор сказал что реализация скрипта уже старая и что желательно придумать что-то другое, вот Я и написал на форуме.

Надеюсь что Я понятно объяснил что хочу сделать

@amr-now · 24.02.2021, 07:20

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label for="s1" class="show-score">Показать счет</label>
    <input id="s1" class="chkb" type="checkbox" data-target="score">
 
    <div class="show-hide-score">
        <div class="block" data-score="">1:2</div>
        <div class="block" data-noscore="">-</div>
        <div class="block" data-score="">3:1</div>
        <div class="block" data-noscore="">-</div>
    </div>
    <script>
        let checkbox = document.getElementById("s1");
        let scores = document.querySelectorAll(".show-hide-score>.block[data-score]");
        s1_change();
 
        checkbox.onchange = s1_change;
        function s1_change() {
            if (checkbox.checked)
                for (let score of scores) {
                    score.style.display = "block";
                    score.nextElementSibling.style.display = "none";
                }
            else
                for (let score of scores) {
                    score.style.display = "none";
                    score.nextElementSibling.style.display = "block";
                }
        }
    </script>
</body>
</html>

Добавлено через 1 час 12 минут
-----
У меня ощущение, что так логичнее:

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label for="s1" class="show-score">Показать счет</label>
    <input id="s1" class="chkb" type="checkbox" data-target="score">
 
    <div class="show-hide-score">
        <div class="block" data-score="1:2"></div>
        <div class="block" data-score="3:1"></div>
    </div>
    <script>
        let checkbox = document.getElementById("s1");
        let scores = document.querySelectorAll(".show-hide-score>.block[data-score]");
        s1_change();
 
        checkbox.onchange = s1_change;
        function s1_change() {
            if (checkbox.checked)
                for (let score of scores) {
                    score.textContent = score.dataset.score;
                }
            else
                for (let score of scores) {
                    score.textContent = "-";
                }
        }
    </script>
</body>
</html>

@clickquit · 24.02.2021, 16:21 **[ТС]**

amr-now,
Что может влиять на этот JS код? Потому что на тестовых платформах работают скрипты, когда ставлю на сайт - нет.

@amr-now · 24.02.2021, 17:40

clickquit, скрипты очень простенькие. Там каждую строчку можно понять.

Присвоения checkbox и scores должны произойти после того, как эти HTML-элементы появились на странице.

@kalabuni · 24.02.2021, 21:46

clickquit, в тексте темы, на которую вы ссылаетесь, речь идёт об элементах с одинаковыми классами, а в заголовке написано про одинаковые идентификаторы
имхо, автор той темы просто ошибся/описался, а вы, не разобравшись, множите и разносите его ошибку

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.02.2021, 00:08
	clickquit, значение id должно быть уникальным на странице, сиречь, если имеется инпут с id="hren", то более никаких элементов (ни инпутов, ни спанов, ни дивов) с тем же id="hren" быть не может! 1

@clickquit 0 / 0 / 0 Регистрация: 23.02.2021 Сообщений: 3
	24.02.2021, 16:21 [ТС]
	amr-now, Что может влиять на этот JS код? Потому что на тестовых платформах работают скрипты, когда ставлю на сайт - нет. 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	24.02.2021, 17:40
	clickquit, скрипты очень простенькие. Там каждую строчку можно понять. Присвоения checkbox и scores должны произойти после того, как эти HTML-элементы появились на странице. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.02.2021, 21:46
	clickquit, в тексте темы, на которую вы ссылаетесь, речь идёт об элементах с одинаковыми классами, а в заголовке написано про одинаковые идентификаторы имхо, автор той темы просто ошибся/описался, а вы, не разобравшись, множите и разносите его ошибку 0

Показать/скрыть элемент при клике на checkbox с одинаковыми id

Решение