Главная » Эффекты для сайта » Появление скрытого содержания при нажатии на флажок (checkbox)

Появление скрытого содержания при нажатии на флажок (checkbox)

2015-05-05 / Вр:23:47 / просмотров: 11127

В сегодняшней статье я покажу, как сделать так, чтобы при нажатии на чекбокс появлялся невидимый текст. Используемый для этого скрипт написан на javascript, он позволит выполнить любые действия при изменении состояния (при нажатии).
Посмотрите, какой результат вы получите, когда установите этот код:

[демонстрация]

Вставьте код JavaScript между тегами <head> и </head>:

<script ENGINE="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>

*меняет только цифры в переменной "bloggood4" и "cat4".

Вот так будет выглядеть полностью готовый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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>

Вот и все! Спасибо, что зашли, надеюсь, информация была понятной и полезной. Всем удачи!