Возникновение события при изменении checkbox на JavaScript
Описание: Простой и частоиспользуемый скрипт, который, в общем случае, выполняет любые действия при изменении состояния checkbox. А в данном случае просто делает видимыми или невидимыми контейнеры в зависимости от состояния соответствующего checkbox.
Результат:
Показать содержимое категории 1
Показать содержимое категории 2
Показать содержимое категории 3
Показать содержимое категории 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> -
Создано 06.05.2011 16:15:39
-
Михаил Русаков
Комментарии (27):
Михаил! Сделал js-скрипт, который по клику на label возле чекбокса ставит в него "птичку". (элемент).checked=true; Везде работает, кроме opera((( Не знаете, как ее победить?
Ответить
Такие вещи делаются без JS. Например, так: <input type="checkbox" name="x" value="1" id="in" /> <label for="in">Выбрать</label>
Ответить
Вот это класс! Спасибо.
Ответить
я начинающий.. пытаюсь сделать то же самое, но применив один чекбокс к нескольким DIVам. работает только с первый.. Что нужно сделать, что бы открывались все?
Ответить
Если Вы хотите одним чекбоксом открыть все div, то поместите все div в другой 1 div, и вот именно этот 1 div и открывайте. Безусловно, все внутренние должны быть display: block;, а этот 1 верхний display: none; вначале.
Ответить
не много не так. div-ы разных классов перемешаны. т.е. есть несколько чекбоксов, каждый должен открывать свои div-ы, которые между собой перемешаны.. как то так. конкретно: есть список ФИО-участники ВОВ. идут в алфавитном порядке. Кто то из них погиб на войне, кто то вернулся. и у каждого - своя судьба (подробности). Тогда имеем 3 чекбокса: 1-"погибшие", 2-"вернувшиеся" и 3-"подробности". DIV "подробности"- внутренний DIV, т.е. DIV-ы вложены друг в друга.
Ответить
Тогда передавайте массив с id в функцию. А внутри функции перебирайте массив и делайте display: block; у каждого id из переданного массива. Если здесь всё действительно вразнобой, то по-другому никак.
Ответить
Михаил, спасибо за все ваши предыдущие ответы, все помогли в развитии безусловно. Но вот возник вопрос снова... как сделать чекбокс чтоб отмечать сообщения которые нужно удалить, и передать эти выделенные сообщения в action? В общем сделать как у phpmyadmin чтоб отмечать все строки и передавать его серверу?
Ответить
<input type="checkbox" name="names[]" value="1" /> Имя сохраняйте, а value меняйте. Тогда, при передаче будут идти данные всех включённых checkbox через запятую.
Ответить
А каким образом можно сделать, чтобы новый слой выпадал не при изменении состояния чекбокса, а, скажем, при нажатии на кнопку? Что в этом случае прописывать вместо if (cb.checked)? И можно вместо слоев использовать <fieldset></fieldset>?
Ответить
Да, всё правильно: if (cb.checked) ... И <fieldset> можно использовать вместо обычных блоков.
Ответить
Пробовал. Если изменить чекбокс на кнопку - не работает.
Ответить
Ищите ошибку, всё должно работать. Кликнули по кнопке, проверили состояние соответствующего чекбокса, сделали соответствующие действия.
Ответить
Попробовал использовать код данного примера в своей форме регистрации, то есть, кроме checkbox с onclick еще есть несколько input с обработкой по onblur. Все работает, пока не добавляю теги <form>...</form> - onclick на checkbox-ах перестает работать, onblur на input-ах продолжает работать нормально
Ответить
onClick должен работать внутри формы без проблем. Скорее где-то ошибка.
Ответить
Нашел, если checkbox, событие onclick которого обрабатывается через JavaScript, используется внутри формы, значения атрибутов name и id должны быть одинаковые. Вне формы это не важно.
Ответить
Михаил, напишите пожалуйста статью про определение пользователя приходящего с поисковых систем на javascript.
Ответить
document.referrer - вот это можно анализировать.
Ответить
Выполняет действия при изменении состояния? Хорошо, давайте tab'ом перейдём на этот чекбокс и нажмём пробел. Состояние чекбокса изменится, а вот ваш onclick вряд ли сработает. Надо делать на onchange.
Ответить
Согласен, спасибо, подправил!
Ответить
не знаю почему но пример выше у меня не работает. Условия: а) был такой кусок кода <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> Итог: работает, не совсем то что надо мне но сойдет
Ответить
вместо: name="css_edit_check" пиши: id="css_edit_check" скрипт из примера будет работать
Ответить
Если несколько checkbox с одинаковым id работает только первый:( Как решить проблему?
Ответить
Михаил подскажите пожалуйста, а как сделать передачу переменных параметров в функцию <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> скрипт не работает помогите правильно передать параметры и правильно прописать их в функции Спасибо заранее
Ответить
вопрос решен
Ответить
Михаил спасибо за скрипт! Не подскажите что надо дописать, чтобы при нажатии на чекбокс показывался только последний контейнер, а предыдущий скрывался. Т.е в не зависимости от кол-ва выбранных чекбоксов активный контейнер был всегда один крайний.
Ответить
Еще на Java Script проверить состояние галочки при клике можно так: <P>< input type="checkbox" id="checkbox_spage"> Show form Dialog Client on your site.</P> < SCRIPT> var el = document.getElementById("checkbox_spage"); el.onclick = function () { if (el.checked) { alert("checkbox_spage 1"); } else { alert("checkbox_spage 0"); }; }; < /SCRIPT> DEMO: http://profi.spage.me/jquery/checkbox-set-true-false-checkbox-click-event-on-jquery-and-js/
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.