При нажатии на checkbox блок должен исчезнуть

@Robin-hood8 · Регистрация: 22.05.2019

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

Здравствуйте, похожая тема уже была, но я так и не смог разобраться. Нужно что бы при нажатии на галочку определенного блока, весь блок пропал. В данном случае пропадает блок с галочкой. Пробовал подобраться через класс самого блока, не получалось.

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
40
41
42
43
44
45
46
 <div class="features" id="feutures_container">
               
                   <figure class="features_blocks">
                    <img src="Image/LayerJS.png" alt="JavaScript">
                           <figcaption>
                           <div class="promo">
                            <h2 class="promo_title">Основы JavaScript </h2>
                            <p class="promo_text">Видеокурс об одном из самых популярных языков программирования - JavaScript. Изучая этот курс вы познаете этот язык от самых основ. </p>
                            <span class="promo_long">24 урока(6 часов 45 минут)</span>
                        </div>
                        <div class="promo_footer">
                            <input type="checkbox" id="cb1" > <label class="checkbox" for="cb1">Посмотрел</label>
                        </div>
                    </figcaption>
                    </figure>
            
                
                <figure class="features_blocks">
                    <img src="Image/LayerJQ.png" alt="JQuery">
                    <figcaption>
                        <div class="promo">
                            <h2 class="promo_title">Основы JQuery </h2>
                            <p class="promo_text">Видеокурс об одном из самых популярных языков программирования - JavaScript. Изучая этот курс вы познаете этот язык от самых основ. </p>
                            <span class="promo_long">11 уроков(2 часа 6 минут)</span>
                        </div>
                        <div class="promo_footer">
                            <input type="checkbox" id="cb2"> <label class="checkbox" for="cb2">Посмотрел</label>
                        </div>
                    </figcaption>
                </figure>
                
                
                <figure class="features_blocks">
                    <img src="Image/Layer5.png" alt="JavaScript">
                    <figcaption>
                        <div class="promo">
                            <h2 class="promo_title">Базовые страницы элемента </h2>
                            <p class="promo_text">Видеокурс по верстке и программированию основных и популярных элементов сайтов. Посмотрев этот курс вы научитесь делать табы, аккордион, слайдер, слайдшоу и т.д. </p>
                            <span class="promo_long">9 уроков(2 часа 7 минут)</span>
                        </div>
                        <div class="promo_footer">
                            <input type="checkbox" id="cb3"> <label class="checkbox" for="cb3">Посмотрел</label>
                        </div>
                    </figcaption>
                </figure>
            </div>

JavaScript
1
2
3
4
5
6
7
8
9
var checkbox = document.querySelectorAll('#feutures_container .checkbox');
    for ( var i=0; i < checkbox.length; i++) {
        var check = checkbox[i];
        
        check.onclick = function() {
        var el = this.parentNode;
        el.parentNode.removeChild(el);
        };
    }

@Андрей МСК · 23.05.2019, 00:14

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<input type="checkbox" id="checkbox">
<div id="block" style="display:none;">Блок с текстом</div>
<script>
$('#checkbox').on("change", function(){
  if ($('#checkbox').is(':checked')){
    $('#block').show();
  }
  else{
    $('#block').hide();
  }
});
</script>

@Lazy_Den · 23.05.2019, 00:47

Сообщение от Robin-hood8

document.querySelectorAll('#feutures_con tainer .checkbox')

Если хорошо присмотреться, то обнаружите, что селектор указывает на элементы label, а не input с типом checkbox.

JavaScript
1
2
3
4
5
[...document.querySelectorAll('#feutures_container [type="checkbox"]')].forEach(el => {
  el.addEventListener('change', e => {
    el.closest('.features_blocks').remove();
  });
});

@Robin-hood8 · 23.05.2019, 21:59 **[ТС]**

Lazy_Den, спасибо большое помогло, и вроде бы понял как. Подскажите пожалуйста, а чтобы блок скрывался через три секунды, после нажатия, мне нужно использовать setTimeout? Если да то как?

@Lazy_Den · 23.05.2019, 23:45

Сообщение от Robin-hood8

Если да то как?

Строку 3 в моём коде заменить на эту:

JavaScript
1
setTimeout(() => el.closest('.features_blocks').remove(), 3000);

@Robin-hood8 · 24.05.2019, 20:58 **[ТС]**

Lazy_Den, отлично, все работает! Изначально, я писал также, но я не ставил "=>". Можете, пожалуйста, объяснить почему важно их поставить?

@Lazy_Den · 25.05.2019, 00:26

Сообщение от Robin-hood8

Можете, пожалуйста, объяснить почему важно их поставить?

Как бы синтаксис такой, потому и нужно )) Традиционный синтаксис функций вам должен быть знаком:

JavaScript
1
2
3
4
5
6
7
function foo() {
 
}
// или 
var foo = function() {
 
};

А в стандарте ES6 (ECMAScript 2015) появился новый синтаксис так называемых "стрелочных функций". Пересказывать все их особенности смысла нет, т.к. всё это грамотно описано на различных ресурсах. Познакомиться с ними вы можете, к примеру, на learn.javascript.ru или developer.mozilla.org

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

@Robin-hood8 0 / 0 / 0 Регистрация: 22.05.2019 Сообщений: 5
	23.05.2019, 21:59 [ТС]
	Lazy_Den, спасибо большое помогло, и вроде бы понял как. Подскажите пожалуйста, а чтобы блок скрывался через три секунды, после нажатия, мне нужно использовать setTimeout? Если да то как? 0

@Robin-hood8 0 / 0 / 0 Регистрация: 22.05.2019 Сообщений: 5
	24.05.2019, 20:58 [ТС]
	Lazy_Den, отлично, все работает! Изначально, я писал также, но я не ставил "=>". Можете, пожалуйста, объяснить почему важно их поставить? 0