<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Возникновение события при изменении checkbox на JavaScript

Возникновение события при изменении checkbox на JavaScript

Описание: Простой и частоиспользуемый скрипт, который, в общем случае, выполняет любые действия при изменении состояния checkbox. А в данном случае просто делает видимыми или невидимыми контейнеры в зависимости от состояния соответствующего checkbox.

Результат:

Показать содержимое категории 1
Показать содержимое категории 2
Показать содержимое категории 3

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

<div>
  <input type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");'/>Показать содержимое категории 1
  <br />
  <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
  <input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' />Показать содержимое категории 2
  <br />
  <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
  <input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' />Показать содержимое категории 3
  <br />
  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
</div>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (26):

sync.o sync.o 07.10.2011 23:52:44

Михаил! Сделал js-скрипт, который по клику на label возле чекбокса ставит в него "птичку". (элемент).checked=true; Везде работает, кроме opera((( Не знаете, как ее победить?

Ответить

Admin Admin 08.10.2011 01:07:25

Такие вещи делаются без JS. Например, так: <input type="checkbox" name="x" value="1" id="in" /> <label for="in">Выбрать</label>

Ответить

sync.o sync.o 08.10.2011 19:30:14

Вот это класс! Спасибо.

Ответить

Михалыч Михалыч 19.11.2011 14:57:43

я начинающий.. пытаюсь сделать то же самое, но применив один чекбокс к нескольким DIVам. работает только с первый.. Что нужно сделать, что бы открывались все?

Ответить

Admin Admin 19.11.2011 15:01:16

Если Вы хотите одним чекбоксом открыть все div, то поместите все div в другой 1 div, и вот именно этот 1 div и открывайте. Безусловно, все внутренние должны быть display: block;, а этот 1 верхний display: none; вначале.

Ответить

Михалыч Михалыч 19.11.2011 16:17:57

не много не так. div-ы разных классов перемешаны. т.е. есть несколько чекбоксов, каждый должен открывать свои div-ы, которые между собой перемешаны.. как то так. конкретно: есть список ФИО-участники ВОВ. идут в алфавитном порядке. Кто то из них погиб на войне, кто то вернулся. и у каждого - своя судьба (подробности). Тогда имеем 3 чекбокса: 1-"погибшие", 2-"вернувшиеся" и 3-"подробности". DIV "подробности"- внутренний DIV, т.е. DIV-ы вложены друг в друга.

Ответить

Admin Admin 19.11.2011 16:24:18

Тогда передавайте массив с id в функцию. А внутри функции перебирайте массив и делайте display: block; у каждого id из переданного массива. Если здесь всё действительно вразнобой, то по-другому никак.

Ответить

Trust Trust 07.12.2011 19:13:06

Михаил, спасибо за все ваши предыдущие ответы, все помогли в развитии безусловно. Но вот возник вопрос снова... как сделать чекбокс чтоб отмечать сообщения которые нужно удалить, и передать эти выделенные сообщения в action? В общем сделать как у phpmyadmin чтоб отмечать все строки и передавать его серверу?

Ответить

Admin Admin 07.12.2011 19:24:56

<input type="checkbox" name="names[]" value="1" /> Имя сохраняйте, а value меняйте. Тогда, при передаче будут идти данные всех включённых checkbox через запятую.

Ответить

enot_poloskun enot_poloskun 12.03.2012 01:28:38

А каким образом можно сделать, чтобы новый слой выпадал не при изменении состояния чекбокса, а, скажем, при нажатии на кнопку? Что в этом случае прописывать вместо if (cb.checked)? И можно вместо слоев использовать <fieldset></fieldset>?

Ответить

Admin Admin 12.03.2012 05:27:42

Да, всё правильно: if (cb.checked) ... И <fieldset> можно использовать вместо обычных блоков.

Ответить

enot_poloskun enot_poloskun 12.03.2012 13:41:00

Пробовал. Если изменить чекбокс на кнопку - не работает.

Ответить

Admin Admin 12.03.2012 13:43:39

Ищите ошибку, всё должно работать. Кликнули по кнопке, проверили состояние соответствующего чекбокса, сделали соответствующие действия.

Ответить

TVV TVV 02.08.2012 15:37:52

Попробовал использовать код данного примера в своей форме регистрации, то есть, кроме checkbox с onclick еще есть несколько input с обработкой по onblur. Все работает, пока не добавляю теги <form>...</form> - onclick на checkbox-ах перестает работать, onblur на input-ах продолжает работать нормально

Ответить

Admin Admin 02.08.2012 23:58:22

onClick должен работать внутри формы без проблем. Скорее где-то ошибка.

Ответить

TVV TVV 05.08.2012 00:57:31

Нашел, если checkbox, событие onclick которого обрабатывается через JavaScript, используется внутри формы, значения атрибутов name и id должны быть одинаковые. Вне формы это не важно.

Ответить

malina95 malina95 03.04.2013 22:43:05

Михаил, напишите пожалуйста статью про определение пользователя приходящего с поисковых систем на javascript.

Ответить

Admin Admin 04.04.2013 11:13:49

document.referrer - вот это можно анализировать.

Ответить

kaja kaja 03.06.2013 18:11:44

Выполняет действия при изменении состояния? Хорошо, давайте tab'ом перейдём на этот чекбокс и нажмём пробел. Состояние чекбокса изменится, а вот ваш onclick вряд ли сработает. Надо делать на onchange.

Ответить

Admin Admin 03.06.2013 18:15:50

Согласен, спасибо, подправил!

Ответить

myxamor0 myxamor0 16.08.2013 18:21:49

не знаю почему но пример выше у меня не работает. Условия: а) был такой кусок кода <input type="checkbox" name="css_edit_check" onchange = 'showOrHide("css_edit_check", "css_edit");'/><div id="css_edit" style="display: none;">text1</div> б) изначально вставлял ваш код из примера выше, при нажатии на чекбокс ничего не происходило Провел пару эксперементов с ним: 1) сделал его таким <script type="text/javascript"> function showOrHide(cb, cat) { cb = document.getElementById(cb); cat = document.getElementById(cat); if (cb.checked) alert("Флажок установлен");; else alert("Флажок не установлен");; } </script> Итог: не один из алертов не сработал сколько бы я не тискал по чекбоксу 2) сделал так <script type="text/javascript"> function showOrHide(cb, cat) { if (cb.checked) alert("Флажок установлен");; else alert("Флажок не установлен");; } </script> Итог: Всегда вывод алерт "Флажок не установлен" 3) сделал так <script type="text/javascript"> function showOrHide(cb, cat) { cat = document.getElementById(cat); if (cat.style.display == "block") cat.style.display = "none"; else cat.style.display = "block"; } </script> Итог: работает, не совсем то что надо мне но сойдет

Ответить

Aleksand Aleksand 10.01.2014 13:13:33

вместо: name="css_edit_check" пиши: id="css_edit_check" скрипт из примера будет работать

Ответить

andrey3681 andrey3681 09.12.2015 13:26:25

Если несколько checkbox с одинаковым id работает только первый:( Как решить проблему?

Ответить

mabia mabia 30.06.2016 07:17:02

Михаил подскажите пожалуйста, а как сделать передачу переменных параметров в функцию <input type = 'checkbox' id = 'cb_<?php echo $comments[$k]["id"];?>' onchange = "showOrHide(cb_<?php echo $comments[$k]["id"];?>, cat_<?php echo $comments[$k]["id"];?>);"/> (<?php echo $comments[$k]["id"];?> берется из БД) Показать содержимое категории 1 <div id = 'cat_<?php echo $comments[$k]["id"];?>' style = 'display: none;'>Содержимое категории 1</div> <script type="text/javascript"> function showOrHide(cb, cat) { cb = document.getElementById("cb_"+id); cat = document.getElementById("cat_"+id); if (cb.checked) cat.style.display = "block"; else cat.style.display = "none"; } </script> скрипт не работает помогите правильно передать параметры и правильно прописать их в функции Спасибо заранее

Ответить

mabia mabia 05.07.2016 14:40:58

вопрос решен

Ответить

dronzya dronzya 15.04.2017 20:55:05

Михаил спасибо за скрипт! Не подскажите что надо дописать, чтобы при нажатии на чекбокс показывался только последний контейнер, а предыдущий скрывался. Т.е в не зависимости от кол-ва выбранных чекбоксов активный контейнер был всегда один крайний.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.