Показ-скрытие элемента формы или 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.

Блог

Как расставить запятые между тегами на CSS?

Иногда проще что-то сделать на чистом CSS, чем на серверной стороне. Например, расставить запятые между тегами. Попробуем разделить подчеркнутые теги-ссылки на чистом CSS.

далее

Как отресайзить картинки батчем?

Все фотографии, которые вы собираетесь отресайзить, должны быть в одной директории, скажем «uploads». Внутри нее можно сохранить любую структуру директорий. Мы научимся создавать копию этой директории, внутри которой все картинки будут отресайзены, причем только в сторону уменьшения разрешения.

далее

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

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

далее

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

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

далее

Весь блог тут