Finar.ru
web.finar.ru
video.finar.ru
Темы для BootstrapNew!

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

Автор: Филипп Казаков, дата: 2011-04-29, просмотров 6689
Тэги

тип: Рецепты, темы: 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

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

Оставить комментарий 


Ваше имя:
->