Jak pokazać i ukryć pola wprowadzania na podstawie Radio Przycisk wyboru

Question

Oto kod, aby pokazać pól wejściowych w zależności od wyboru radiowych jak:

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> 

jednak Chciałbym, aby pola wejściowe były ukryte (jak na obrazku) i sprawiają, że nie używają spacji do momentu wybrania przycisku radiowego, gdy radio jest zaznaczone, pokaż je z efektem zanikania ...

Here is the fiddle:

Answer 1

zastąpić wszystkie wystąpienia visibility stylu display

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

Tutaj jest aktualizowany jsfiddle: http://jsfiddle.net/QAaHP/16/

Można to zrobić za pomocą funkcji MooTools lub jQuery przesuwać w górę/w dół, ale jeśli nie potrzebujesz efektu animacji, to prawdopodobnie za dużo dla tego, czego potrzebujesz.

Wyświetlanie CSS to szybsze i prostsze podejście.

Answer 2

Zastosowanie display:none aby nie pokazać elementy, a następnie z JQuery można użyć fadeIn() i fadeOut() celu ukrycia/pokazania elementów.

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

Answer 3

Musisz także ustawić wysokość elementu na 0, gdy jest ukryta. Podczas korzystania z jQuery natknąłem się na ten problem. Moim rozwiązaniem było ustawienie wysokości i krycia na 0, gdy są one ukryte, a następnie zmiana wysokości na auto i krycie na 1, gdy jest ona ukryta.

Polecam patrząc na jQuery. Jest bardzo łatwy do zrobienia i pozwoli ci łatwiej robić takie rzeczy.

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

To nieco lepsza pod kątem wydajności, aby zmienić CSS z jQuery i używać animacji CSS3 zrobić listę rozwijaną, ale to też bardziej skomplikowane. Powyższy przykład powinien zadziałać, ale nie przetestowałem go.

Answer 4

Zastosowanie display: none/blok, zamiast widoczności i dodać margin-top/bottom na przestrzeni chcesz zobaczyć tylko wtedy, gdy wejścia są pokazane

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

}

i swój linia html dla tagu

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

Answer 5

ifYes pomocą właściwości visibility wpływa tylko na widoczność elementów na stronie; nadal będą tam w układzie strony. Aby całkowicie usunąć elementy ze strony, użyj właściwości display.

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

Pamiętaj, aby zmienić swój plik css, aby używać wyświetlacza zamiast widoczności.

chodzi o javascript (to nie jest jQuery), upewnij się ukryć opcje domyślnie podczas wczytywania strony:

<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> 

Jeżeli nie zostało to zrobione, polecam przyjrzeniu w jQuery. Kod jQuery jest o wiele jaśniejszy i łatwiejszy do napisania i zrozumienia.

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

Answer 6

***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>*** 

Answer 7

Można zrobić bardzo prosty krok

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


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

});