<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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

вопрос решен

Ответить

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