Возникновение события при изменении checkbox на JavaScript

Описание: Простой и частоиспользуемый скрипт, который, в общем случае, выполняет любые действия при изменении состояния checkbox . А в данном случае просто делает видимыми или невидимыми контейнеры в зависимости от состояния соответствующего checkbox .

Описание: Простой и частоиспользуемый скрипт, который, в общем случае, выполняет любые действия при изменении состояния 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'/>Показать содержимое категории 1

  <br />

  <div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>

  <input type = 'checkbox' id = 'cb2' />Показать содержимое категории 2

  <br />

  <div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>

  <input type = 'checkbox' id = 'cb3' />Показать содержимое категории 3

  <br />

  <div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>

</div>