Новости
Статьи
Появление скрытого содержания при нажатии на флажок (checkbox)
Опубликовано: 01.09.2018
В сегодняшней статье я покажу, как сделать так, чтобы при нажатии на чекбокс появлялся невидимый текст. Используемый для этого скрипт написан на javascript, он позволит выполнить любые действия при изменении состояния ( при нажатии ).
Посмотрите, какой результат вы получите, когда установите этот код:[ демонстрация ]
Вставьте код JavaScript между тегами <head> и </head> :
<script type="text/javascript"> function showOrHide(bloggood, cat) { bloggood = document.getElementById(bloggood); cat = document.getElementById(cat); if (bloggood.checked) cat.style.display = "block"; else cat.style.display = "none"; } </script>Вставьте код HTML между тегами <body> и </body> :
<div> <input type = 'checkbox' id = 'bloggood1' onchange = 'showOrHide("bloggood1", "cat1");'/>Показать содержимое категории 1 <br /> <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div> <input type = 'checkbox' id = 'bloggood2' onchange = 'showOrHide("bloggood2", "cat2");' />Показать содержимое категории 2 <br /> <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div> <input type = 'checkbox' id = 'bloggood3' onchange = 'showOrHide("bloggood3", "cat3");' />Показать содержимое категории 3 <br /> <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div> </div>Если нужно добавить еще checkbox, тогда добавьте вот этот код перед </div>
<script type="text/javascript"> function showOrHide(bloggood, cat) { bloggood = document.getElementById(bloggood); cat = document.getElementById(cat); if (bloggood.checked) cat.style.display = "block"; else cat.style.display = "none"; } </script>*меняет только цифры в переменной " bloggood 4 " и " cat 4 ".
Вот так будет выглядеть полностью готовый код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Появление действия при нажатии на флажок (checkbox) появляется скрытое содержание (bloggood.ru)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function showOrHide(bloggood, cat) { bloggood = document.getElementById(bloggood); cat = document.getElementById(cat); if (bloggood.checked) cat.style.display = "block"; else cat.style.display = "none"; } </script> </head> <body> <div> <input type = 'checkbox' id = 'bloggood1' onchange = 'showOrHide("bloggood1", "cat1");'/>Показать содержимое категории 1 <br /> <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div> <input type = 'checkbox' id = 'bloggood2' onchange = 'showOrHide("bloggood2", "cat2");' />Показать содержимое категории 2 <br /> <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div> <input type = 'checkbox' id = 'bloggood3' onchange = 'showOrHide("bloggood3", "cat3");' />Показать содержимое категории 3 <br /> <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div> <input type = 'checkbox' id = 'bloggood4' onchange = 'showOrHide("bloggood4", "cat4");' />Показать содержимое категории 4 <br /> <div id = 'cat4' style = 'display: none;'>Содержимое категории 4</div> </div> </body> </html>Вот и все! Спасибо, что зашли, надеюсь, информация была понятной и полезной. Всем удачи!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: javascript , Вебмастеру , для сайта , эффекты для сайта
