2 / 2 / 0
Регистрация: 05.05.2014
Сообщений: 147

После включения первым чекбоксом второго чекбокса выполнить скрипт

17.03.2020, 12:29. Показов 1328. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет. Есть два чекбокса. Программно первым чекбоксом включаю второй чекбокс. Как надо сделать так, чтобы после после этих манипуляций заработал скрипт для второго чекбокса?
JavaScript
1
2
3
4
document.getElementById('envelope__check').onclick = function (){
if (document.getElementById('envelope__check').checked == true){
document.getElementById('show').checked = true;}
}
влючил чекбокс, далее должен сработать этот скрипт
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
let checkBox = document.getElementById("show"); // Получаем чекбокс по id
    let firstimg = document.getElementById('first'); // Получаем первый div по id (Размещаться при помощи css может где угодно
    let secondimg = document.getElementById('second'); // Получаем второй div по id (Размещаться при помощи css может где угодно
    let threedimg = document.getElementById('three'); // Получаем второй div по id (Размещаться при помощи css может где угодно
    function showFirst() { // Функция отображения первой картинки
        firstimg.style.display = "block";
    }
    function showSecond() { // Функция отображения второй картинки
        secondimg.style.display = "block";
    }
    function showThree() { // Функция отображения третьей картинки
        threedimg.style.display = "block";
    }
 
    let show = localStorage.getItem('show'); // Проверяем запись в localstorage
    if(show){ // Если не пустое то...
        if (show == "true") { // Проверяем - если равно true, то...
            checkBox.checked = true; // Делаем чекбок активным
            showFirst(); // Показываем первую картинку
            showSecond(); // Показываем вторую картинку
        showThree();// Показываем третью картинку
        }
    }
 
    function ShowPics() { // В случае нажатия на чекбокс
        if (checkBox.checked == true){ // Проверяем выбран или не выбран. Если выбран то...
            setTimeout(showFirst, 1000); // Через 1 сек показываем первую картинку
            setTimeout(showSecond, 2000); // Ещё через2сек показывам вторую картинку
        setTimeout(showThree, 3000); // Ещё через 3 сек показывам третью картинку
            localStorage.setItem('show', 'true'); // Делаем запись в localstorage
        } else { // Если не выбран чекбокс, то...
            firstimg.style.display = "none"; // Скрываем первую картинку
            secondimg.style.display = "none"; // Скрываем вторую картинку
        threeimg.style.display = "none"; // Скрываем третью картинку
            localStorage.setItem('show', 'false'); // Делаем запись в localstorage
        }
    }
Файл во вложении.
Всем спасибо.
Вложения
Тип файла: zip 2 чекбокса.zip (1.3 Кб, 1 просмотров)
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
17.03.2020, 12:29
Ответы с готовыми решениями:

Скрипт работает только с первым чекбоксом на странице
Всем привет! Есть скрипт: jQuery(document).ready(function($) { var elem = $('input'); elem.change(function() { var value =...

После включения чекбокса показать картинки через n секунд
Всем привет. Необходимо, чтобы после включения чекбокса, первая картинка появилась на странице через 2 сек. и осталась на своем месте,...

Как включать один таймер через 2 секунды после включения второго
Дело в том, что у меня есть два таймера QTimer. Мне необходимо запустить 1 таймер через две секунды после запуска второго. Как это можно...

7
490 / 167 / 98
Регистрация: 23.01.2020
Сообщений: 324
17.03.2020, 13:38
Лучший ответ Сообщение было отмечено bsi1 как решение

Решение

bsi1, Проверьте вот такое:

PHP/HTML
1
2
3
4
5
6
7
8
<input type="checkbox" id="check1">
<input type="checkbox" id="check2" onchange="alert('changed');">
 
<script>
    document.getElementById("check1").addEventListener('change',function(){
        document.getElementById("check2").click();
    });
</script>
1
2 / 2 / 0
Регистрация: 05.05.2014
Сообщений: 147
17.03.2020, 14:27  [ТС]
Спасибо работает!

Добавлено через 14 минут
Если бы сюда привязать ещё включение аудио файла, через секуд 5, было бы вообще супер.
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
17.03.2020, 16:05
bsi1, задача непонятная.
Вижу, что второй чекбокс после нажатия с интервалом в одну секунду добавляет картинки.

А первый чекбокс что должен вообще делать? Цель программы не ясна.

Добавлено через 1 минуту
-----
Тут надо на 3 секунды как раз запретить снимать галку со второго чекбокса, чтобы программа работала правильно.

Добавлено через 6 минут
---
Или при снятии второй галки пускать отмену на появление картинок в будущем. Тоже интересный вариант задачи.
Асинхронные операции - интересная тема для разминки.
0
2 / 2 / 0
Регистрация: 05.05.2014
Сообщений: 147
17.03.2020, 17:15  [ТС]
Алгоритм такой: включаем первый чекбокс, тут же программно включается второй чекбокс, после включения второго чекбокса начинает работать скрип, который выводит на экран три картинки с разными интервалами. У меня теперь всё работает, как мне надо.
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
17.03.2020, 18:00
bsi1, а почему сразу второй чекбокс нельзя руками нажать? Потребность в первом чекбоксе не очевидна.

Предлагаю сделать отмену еще не появившихся картинок в процессе их появления. Будет типа круто.
0
2 / 2 / 0
Регистрация: 05.05.2014
Сообщений: 147
17.03.2020, 18:41  [ТС]
Я совсем недавно этим занялся, в смысле HTML, мало что соображаю. Выкладываю файл. Там у меня проблемы с отображением этих картинок и после открытия конверта всё съезжает влево. Подскажи, что можно сделать. Спасибо.
Вложения
Тип файла: zip 1.zip (1.31 Мб, 0 просмотров)
0
2 / 2 / 0
Регистрация: 05.05.2014
Сообщений: 147
18.03.2020, 11:11  [ТС]
С картинками разобрался, тему можно закрыть.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
18.03.2020, 11:11
Помогаю со студенческими работами здесь

Поменять элементы массива перед первым с элементами после второго
Дан массив и позиции 2ух элементов. Нужно поменять элементы перед первым с элементами после второго. Т.е. было 1 2 3 5 А 2 4 В 2 3 6 6,...

Можно ли выполнить скрипт после загрузки конкретного элемента?
Есть яндексовская форма поиска по сайту. Сам код формы загружается по мере загрузки страницы. Как не знаю. Нужно совершить пару действий с...

Выполнить скрипт после выполнения остальных скриптов страницы
Есть некий скрипт, который выполняется после загрузки документа $(document).ready() Но на странице таких скриптов несколько(...

Выполнить действие сразу после вызова JS-скрипт посредством самого JS
Доброго времени суток! Подскажите, пожалуйста, никак не выходит. Вызываю JS-скрипт с помощью самого JS следующим образом: ...

Как сделать чтобы при нажатии одного чекбокса текст второго окрашивался в красный
HTML: &lt;td&gt;Стать:&lt;/td&gt; &lt;td&gt; &lt;input id=&quot;sexm&quot; type=&quot;checkbox&quot; name=&quot;sex&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru