38

ラジオの選択に応じて入力フィールドを表示するコードは次のとおりです。

脚本

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

ただし、入力フィールドを（画像のように）非表示にして、ラジオボタンが選択されるまでスペースを使用しないようにし、ラジオが選択されたときにフェード効果でそれらを表示したいと思います...

これがフィドルです：

ここに画像の説明を入力

4

9 に答える 9

43

visibilityスタイルのすべてのインスタンスを次のように置き換えますdisplay

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

更新された jsfiddle は次のとおりです: http://jsfiddle.net/QAaHP/16/

Mootools または jQuery 関数を使用して上下にスライドさせることができますが、アニメーション効果が必要ない場合は、おそらく必要なものには多すぎます。

CSS ディスプレイは、より高速でシンプルなアプローチです。

于 2013-07-12T18:29:20.277 に答える
11 
***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>***
于 2014-02-08T14:16:38.377 に答える
6

非常に単純なステップでできること

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


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

});
于 2014-03-09T14:30:39.930 に答える
5

非表示の場合は、要素の高さを 0 に設定する必要もあります。jQueryを使用しているときにこの問題に遭遇しました。私の解決策は、非表示のときに高さと不透明度を0に設定し、非表示のときに高さを自動に、不透明度を1に変更することでした。

jQueryを見ることをお勧めします。ピックアップするのは非常に簡単で、このようなことをより簡単に行うことができます.

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

jQuery で CSS を変更し、CSS3 アニメーションを使用してドロップダウンを実行する方がパフォーマンスがわずかに優れていますが、これもより複雑です。上記の例は機能するはずですが、テストしていません。

于 2013-07-12T18:29:37.757 に答える
2

display:none/blockの代わりに, を使用し、入力が表示されている場合にのみ表示するスペースvisibilityに a を追加しmargin-top/bottomます

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

ifYesタグのHTML行

<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:
于 2013-07-12T18:35:21.207 に答える
1

display:noneアイテムを表示しないために使用し、JQuery を使用fadeIn()しfadeOut()て要素を非表示/非表示にすることができます。

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

于 2013-07-12T18:24:48.123 に答える
1

プロパティを使用する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

于 2013-07-12T18:44:25.773 に答える