Показ-скрытие элемента формы или div по чекбоксу

Как просто на чистом JavaScript сделать чекбокс, при выделении которого появляется любой элемент с ID "whatever", а при снятии выделения - исчезает?

<HTML>
  <HEAD>
     <TITLE></TITLE>
<script type="text/javascript"><!--
function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
  --></script>

  </HEAD>
<BODY>
<input type="checkbox" onclick="showHide('whatever');" />
<input name="name" type="text" size="38" value='Текстовое поле, например' id="whatever" style="visibility:hidden">

</BODY>
</HTML>

Еще проще, для radio input:

<input type="radio" name="test" value="hideIT" onclick="document.getElementById('thisID').style.visibility='hidden';">скрыть<br>
<input type="radio" name="test" value="showIT" onclick="document.getElementById('thisID').style.visibility='visible';">показать<br><br>

<span id="thisID" style="visibility:hidden">
мудрый контент
</span>
K@iser — 2011-06-08, 10:04

Спасибо! очень наглядно

@leX — 2012-02-19, 10:27

а, если есть три чекбокса, и если активен хотя бы один блок виден, а при неактивности всех трех блок скрыт?

Тут лучше подключить jQuery и оттолкнуться от какого-то такого кода:

$("input:checkbox").attr("checked","checked"); // устанавливает галочку на все checkbox-ы
$("input:checkbox").removeAttr("checked"); // снимает галочку со всех checkbox-ов

Finar.

@leX — 2012-02-19, 13:44

есть три чека с onchange для показа скрытия изображений. слева от них div с изображением вертикального размера. когда все три чека не активны, хотелось бы скрыть div с изображением размеров. подскажите куда копать? или может ссыль какую. спасибо.

@leX — 2012-02-19, 14:04

т.е. нужна функция проверки массива chekbox-ов. если активен хотя бы один - блок виден. при снятии всех флажков, блок не виден. как-то так

Отвечаю на вопрос "куда копать": $("input:enabled"); и статья jQuery для начинающих. Часть 4. Селекторы. Вот пример простейшей функции на jQuery:

function step13Tires(){
    $('#13-step').bind("change", function () { // если raido-button с id=13-step нажата
        $("#14-step").find("input").removeAttr("disabled"); // включить элемент input с id=14-step
        step14Probeg(); // и запустить следующую функцию
    });
};     
 
Богдан — 2012-06-28, 16:03

Спасибо. Очень доходчиво и понято.

Всегда пожалуйста!

Finar.

Блог

Tilda Module: интеграция NetCat с Tilda.cc

Представляем нашу новую разработку, модуль интеграции CMS NetCat с платформой Tilda.cc. Модуль дает возможностью полуавтоматически размещать классные лендинги прямо в структуре вашего сайта!

далее

Как оптимально заархивировать файлы, чтобы распаковать их средствами ISPmanager?

В определенных случаях файлы выгоднее заливать на веб-сервер в виде архива. Во-первых, если данные хорошо сжимаются, или же просто файлов очень много, это сократит время заливки. Во-вторых, в любом случае это обезопасит данные от случайного повреждения, так как при распаковке архива происходит проверка его целостности с помощью контрольной суммы (CRC). Однако, не вполне понятно, какой формат архива и тип сжатия выбирать? Мы провели небольшое экспериментальное исследование на эту тему.

далее

Как расшифровать бэкапы, зашифрованные ISPmanager?

В ISPmanager версии 5.52.0 и старше, реализована новая система резервного копирования, построенная на основе некоей ISPtar. И работает она... своеобразно. Попробуем разобраться, как именно.

далее

Типовой сайт по раскрытию информации по Приказу ФСФР 22.06.2005 № 05-23/пз-н

Представляемый программный комплекс предназначен для российских УК ПИФ (управляющих компаний паевого инвестиционного фонда). В соответствии с требованиями законодательства, такие УК обязаны иметь сайт по раскрытию информации, на котором будет регулярно публиковаться определенный набор документов, касающихся их деятельности. И не только публиковаться, но и своевременно отправляться в Архив, а кроме всего прочего должно вестись журналирование всех этих действий. Иначе -- плохо, иначе -- нарушение действующего законодательства, наказания, штрафы, отзыв лицензии и так далее.

далее

Весь блог тут