Статьи

Появление скрытого содержания при нажатии на флажок (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 , Вебмастеру , для сайта , эффекты для сайта

2011.11.19
Карта
rss