Как показать и скрыть поля ввода на основе выбора кнопки радио

Вот код для отображения полей ввода в зависимости от выбора радио, например:

SCRIPT

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    } else {
        document.getElementById('ifYes').style.visibility = 'hidden';
    }

</script>

HTML

Yes
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>No
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">If yes, explain:
    <input type='text' id='yes' name='yes'/>
    <br>What can we do to accommodate you?
        <input type='text' id='acc' name='acc'/>
</div>
   other 3
<input type='text' id='other3' name='other3'>
<br>
    other 4
<input type='text' id='other4' name='other4'>
<br>

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

Вот скрипка:

enter image description here

Ответы

Ответ 1

Заменить все экземпляры стиля visibility на display

display:none //to hide
display:block //to show

Здесь обновляется jsfiddle: http://jsfiddle.net/QAaHP/16/

Вы можете сделать это, используя функции Mootools или jQuery для перемещения вверх/вниз, но если вам не нужен эффект анимации, это, вероятно, слишком много для того, что вам нужно.

Отображение CSS - это более быстрый и простой подход.

Ответ 2

***This will work.........
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 window.onload = function() {
    document.getElementById('ifYes').style.display = 'none';
    document.getElementById('ifNo').style.display = 'none';
}
function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
    } 
    else if(document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
   }
}
function yesnoCheck1() {
   if(document.getElementById('redhat').checked) {
       document.getElementById('redhat1').style.display = 'block';
       document.getElementById('aix1').style.display = 'none';
    }
   if(document.getElementById('aix').checked) {
       document.getElementById('aix1').style.display = 'block';
       document.getElementById('redhat1').style.display = 'none';
    }
}
</script>
</head>
<body>
Select os :<br>
windows
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>Unix
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="display:none">
Windows 2008<input type="radio" name="win" value="2008"/>
Windows 2012<input type="radio" name="win" value="2012"/>
</div>
<div id="ifNo" style="display:none">
Red Hat<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"value="2008" 

id="redhat"/>
AIX<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"  
value="2012" id="aix"/>
</div>
<div id="redhat1" style="display:none">
Red Hat 6.0<input type="radio" name="redhat" value="2008" id="redhat6.0"/>
Red Hat 6.1<input type="radio" name="redhat" value="2012" id="redhat6.1"/>
</div>
<div id="aix1" style="display:none">
aix 6.0<input type="radio" name="aix" value="2008" id="aix6.0"/>
aix 6.1<input type="radio" name="aix" value="2012" id="aix6.1"/
</div>
</body> 
</html>***

Ответ 3

Вы можете сделать с очень простым шагом

$(':radio[id=radio1]').change(function() {
   $("#yes").removeClass("none");
   $("#no").addClass("none");


});
$(':radio[id=radio2]').change(function() {
   $("#no").removeClass("none");
   $("#yes").addClass("none");

});

Ответ 4

Вам нужно также установить высоту элемента в 0, когда он скрыт. Я столкнулся с этой проблемой при использовании jQuery, мое решение состояло в том, чтобы установить высоту и непрозрачность на 0, когда она скрыта, а затем изменить высоту на авто и непрозрачность на 1, когда она не скрыта.

Я бы рекомендовал посмотреть на jQuery. Это довольно легко подобрать и позволит вам делать такие вещи намного легче.

$('#yesCheck').click(function() {
    $('#ifYes').slideDown();
});
$('#noCheck').click(function() {
    $('#ifYes').slideUp();
});

Немного лучше для производительности изменить CSS с помощью jQuery и использовать анимацию CSS3 для создания выпадающего списка, но это также более сложно. Приведенный выше пример должен работать, но я его не тестировал.

Ответ 5

Используйте display:none, чтобы не отображать элементы, затем с помощью JQuery вы можете использовать fadeIn() и fadeOut(), чтобы скрыть/показать элементы.

http://www.w3schools.com/jquery/jquery_fade.asp

Ответ 6

Используйте display: none/block вместо видимости и добавьте поле сверху/снизу для пространства, которое вы хотите видеть ТОЛЬКО при отображении входных данных

 function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
           document.getElementById('ifYes').style.display = 'block';
        } else {
           document.getElementById('ifYes').style.display = 'none';
        }
    }

и ваша HTML-строка для тега ifYes

<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:

Ответ 7

Использование свойства visibility влияет только на видимость элементов на странице; они все равно будут находиться на макете страницы. Чтобы полностью удалить элементы со страницы, используйте свойство display.

display:none // for hiding
display:block // for showing

Обязательно измените свой файл css, чтобы использовать дисплей вместо видимости.

Что касается javascript (это не jQuery), убедитесь, что вы скрываете параметры по умолчанию при загрузке страницы:

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('ifYes').style.display = 'none';
    }

    function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
            document.getElementById('ifYes').style.display = 'block';
        } 
        else {
            document.getElementById('ifYes').style.display = 'none';
        }
    }

</script>

Если вы еще этого не сделали, я бы рекомендовал взглянуть на jQuery. Код jQuery намного понятнее и проще в написании и понимании.

http://www.w3schools.com/jquery/default.asp

Ответ 8

<script type="text/javascript">
function Check() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    } 
    else {
        document.getElementById('ifYes').style.display = 'none';

   }
}

</script>
</head>
<body>
Select os :
<br>
Two
<input type="radio" onclick="Check();" value="Two" name="categor'enter code here'y" id="yesCheck"/>One
<input type="radio" onclick="Check();" value="One"name="category"/>
<br>
<div id="ifYes" style="display:none" >
Three<input type="radio" name="win" value="Three"/>
Four<input type="radio" name="win" value="Four"/>