ラジオボタンが選択されているときに要素を表示し、javascriptを使用して選択されていない場合は非表示にする方法はありますか？

私はインタラクティブなオンラインフォームを作りたいと思っています。人々が第1質問の1つのオプションを選択すると、それに応じた要素が選択されたときに表示され、他のオプションが選択されたときに非表示になります。（他のボタンが選択されているときに他の要素が表示されるはずです）ラジオボタンが選択されているときに要素を表示し、javascriptを使用して選択されていない場合は非表示にする方法はありますか？

これはこれまでのコードです。

function showStuff(id, btn) { 
 
    if (document.getElementById(id).style.display == "none") { 
 
    document.getElementById(id).style.display = 'block'; 
 
    } else if (document.getElementById(id).style.display == 'block') { 
 
    document.getElementById(id).style.display = 'none'; 
 
    } 
 
}

<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" /> 
 

 
<div id="A" style="display:none"> 
 
    This should display only when A button is clicked 
 
</div> 
 
<div id="B" style="display:none"> 
 
    This should display only when B button is clicked 
 
</div>

私はそれを表示したら、私は他のオプションを選択したとき、私はそれを隠すことはできません。良いアドバイスはありますか？どうもありがとう！

出典

2016-09-13 user3167515

あなたはjqueryのを使用しますか？ – Mohammad

あなたはほぼそこにあります。ちょうど1行のコードを追加して、各クリックで両方のdivを非表示にします。

のjQueryなし

$("#A,#B").hide();

：

function showStuff(id, btn) { 
 
    $("#A,#B").hide(); // hide both each time 
 

 
    document.getElementById(id).style.display = 'block'; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" /> 
 

 
<div id="A" style="display:none"> 
 
    This should display only when A button is clicked 
 
</div> 
 

 
<div id="B" style="display:none"> 
 
    This should display only when B button is clicked 
 
</div>

：

document.getElementById("A").style.display = 'none'; document.getElementById("B").style.display = 'none';

は、以下の完全な作業コードを参照してくださいjQueryのを使用して

出典

2016-09-13 09:18:51

これはとてもうまく動作します！ – user3167515

はこれを試してみてください：

<script type="text/javascript"> 
function showStuff(id, btn) { 
    document.getElementById("A").style.display = 'none'; 
    document.getElementById("B").style.display = 'none'; 
    if (id == "A") { 
     document.getElementById("A").style.display = 'block'; 
    } else { 
     document.getElementById("B").style.display = 'block'; 
    } 

} 
</script>

出典

2016-09-13 09:21:43 piotrb

私は

function showStuff(id, btn) { 
    document.getElementById('A').style.display = 'none'; 
    document.getElementById('B').style.display = 'none'; 

    document.getElementById(id).style.display = 'block'; 
}

この機能をお勧めしますちょうどあなたが今までに別のものを追加した場合、関数のbegginingで利用可能なすべてのオプションを隠す忘れてはいけません。

jQueryを使うと、セレクタ$（ 'input [name = q1]'）を使用してすべての入力を選択し、すべてのオプションを1行だけで非表示にすることができます。

$('input[name=q1]').hide();

出典

2016-09-13 09:22:26

function showStuff(value,btn) { 
 
    if(value=='A'){ 
 
    document.getElementById("A").style.display = 'block'; 
 
    document.getElementById("B").style.display = 'none'; 
 
    } 
 
    else if(value=='B'){ 
 
    document.getElementById("B").style.display = 'block'; 
 
    document.getElementById("A").style.display = 'none'; 
 
    } 
 
     
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;"/> 
 

 
<div id="A" style="display:none"> 
 
This should display only when A button is clicked 
 
</div> 
 

 
<div id="B" style="display:none"> 
 
This should display only when B button is clicked 
 
</div> </body> 
 

 
</html>

出典

2016-09-13 09:36:30 Gowtham

ラジオボタンが選択されているときに要素を表示し、javascriptを使用して選択されていない場合は非表示にする方法はありますか？

答えて

関連する問題