JavaScriptで表示して非表示にする

は、しかし働いているダイナミックラジオボタンがありますが、私はそれを隠すよう使用すると、1つのオプションは、別に思える選択するとき、私はjavascriptの

に新しいのですか？これを修正しますか？

ラジオ：その他の

とdivの非表示•NO•YES•...

<div id="hide"> FORM FOR YES </div> 
<div id="hide2">FORM FOR OTHER </div>

私は "はい" を選択し、 "その他" 2つのdivとして登場していることのdivを非表示にすることができます"隠す"。これは今までに「はい」と「ああ」を選択した場合のみです。

window.onload=function(){ 
    document.getElementById('hide').style.display="none"; 
      document.getElementById('hide2').style.display="none"; 
} 

function possui_dominio() 
{ 
if(document.getElementsByName('form[dominio]')[0].checked) 
document.getElementById('hide').style.display="inline"; 

if(document.getElementsByName('form[dominio]')[1].checked) 
document.getElementById('hide').style.display = 'none'; 
document.getElementById('hide2').style.display = 'none'; 

if(document.getElementsByName('form[dominio]')[2].checked) 
document.getElementById('hide2').style.display="inline"; 
} 

</script>

の悪い英語のため申し訳ありませんが、私を助けて人のためにありがとうございます。

出典

2011-11-13 user1044351

本当に素敵な回答です！ありがとうございました。一定！！ – user1044351

これは、常に**大括弧で囲まれたブロック（条件付き/ループ）をラップする必要がある理由の素晴らしい例です。それ以外の方法をとることは、厄介なコードを作成するだけでなく、数か月後にデバッグや理解を非常に困難にすることです。 – BryanH

あなたはこのようなあなたの関数内の他の要素を非表示にする必要があります。

function possui_dominio() 
{ 
    if(document.getElementsByName('form[dominio]')[0].checked){ 
     document.getElementById('hide2').style.display="none"; 
     document.getElementById('hide').style.display="inline"; 
    } 

    if(document.getElementsByName('form[dominio]')[1].checked){ 
     document.getElementById('hide').style.display = 'none'; 
     document.getElementById('hide2').style.display = 'none'; 
    } 

    if(document.getElementsByName('form[dominio]')[2].checked){ 
     document.getElementById('hide2').style.display="inline"; 
     document.getElementById('hide').style.display="none"; 
    } 
}

出典

2011-11-13 17:03:31 nillls

ohhhh = D、ありがとうございました。 – user1044351

これに対する最適化は、フォームコレクションを次のような変数に格納することです。 var myForm = document.getElementsByName（ 'form [dominio]'）; そしてif文では、myForm [0] .checked、myForm [1] .checkedなどを使用します。このようにして、DOMトラバーサルは1回だけ発生します。 – nillls

-1

How to use jQuery to show/hide divs based on radio button selection?

使用名ではなく、（この場合）のID。名前は同じでなければなりません。

は、純粋なJavaScriptを使用する場合よりもブラウザ間の違いをはるかに上手く処理するjQueryなどのフレームワークを使用します。

最後に、JavaScriptは/ not/Javaです。 Javaスクリプト、if文で

出典

2011-11-13 16:58:24

JavaScriptはjQueryではありません。「jQueryソリューションを私に提案してください」などの文章は見ましたか？ –

OPは/ a/solutionが好きであることを暗示していました。私は解決策を提供しました。私はあなたのものを見ません。 –

@ KaeVerensほとんどの人がjqueryを求めているのを見ると、純粋なjsオルタナティブバージョンで時間を無駄にすることさえありません。あなたが批判を受けるかもしれないからです。 – david

常にこの方式に従ってください：

if (condition) 
    statement;

条件が真である場合には次の2つの文を実行したい場合は、（{}）中括弧の中にこれらのステートメントを配置する必要がありますので、彼らは両方を一緒に実行していること：

if (condition) 
    statement1; 
statement2;

：あなたの第二 if文が（うまくフォーマットされた）このようになります

if (condition) { 
    statement1; 
    statement2; 
}

ご覧のとおり、2番目のステートメントはifステートメントとは関係がないため、常に実行されます。

出典

2011-11-13 17:02:29 Yogu

これはあなたのための簡単な例です。

<html> 
<head> 
<title>Hide/Show Pane Javascript</title> 
<script type="text/javascript"> 
    function togglePane(pane_id){ 
    //alert(pane_id) 
     var current_pane = document.getElementById('pane_'+pane_id); 
     //alert(current_pane); 
     if(pane_id == 1){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_2').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 2){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 3){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_2').style.display = 'none'; 
     } 
    } 
</script> 
</head> 
<body> 
<input type="radio" name="option" id="option1" value="1" checked="checked" onclick="togglePane(1)"><label for="option1">Yes</label> 
<input type="radio" name="option" id="option2" value="2" onclick="togglePane(2)"><label for="option2">No</label> 
<input type="radio" name="option" id="option2" value="3" onclick="togglePane(3)"><label for="option3">Other</label> 
<div id="pane_1" style="display: block">Yes Block</div> 
<div id="pane_2" style="display: none">No Block</div> 
<div id="pane_3" style="display: none">Other Block</div> 
</body> 
</html>

出典

2011-11-13 17:13:06

JavaScriptで表示して非表示にする

答えて

関連する問題