При нажатии на 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

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@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