-2

div "q2" および "q3" を非表示にしながら、ページの読み込み時に ID "q1" の DIV を表示したいと思います。私のコードは以下のとおりです。はい/いいえボタンをチェックした後、div "q2" または div " のいずれかを表示したいと考えています。 q3」の回答によると。

JavaScriptを使用してこれを行うにはどうすればよいですか? どうもありがとう。

<div id="q1">
<p>1. Do you like red?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q1Yes" name="q1A" value="Yes"/>
              Yes</label><br>

              <label><INPUT type="radio" id="q1No" name="q1A" value="No"/>
              No</label>
</div>

<div id="q2">
<p>2. Do you like green?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q2Yes" name="q2A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q2No" name="q2A" value="No" />
              No</label>
</div>

<div id="q3">
<p>3. Do you like dessert?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q3Yes" name="q3A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q3No" name="q3A" value="No" />
              No</label>
</div>
4

4 に答える 4

3

純粋な Javascript を使用して、最初に要素を取得する必要があります。

var element = document.getElementById('q1');

次に、値を設定する必要がありdisplayます。

element.style.display = "none";

それらを再度表示するには、値を以前の設定に設定するだけです。例えば：

element.style.display = "block"; // if it was block.

これにより、要素が非表示になります。これにより、ページから非表示になりますが、DOM からは削除されません。

コードは教えません。原理を教えたほうが理にかなっており、自分でそれを解決できます。そうでなければ、誰も本当に何も学びません!

于 2013-05-06T18:32:50.110 に答える
1

これらの種類の操作には jQuery を使用する必要があります。

http://jquery.com

<head></head>タグにスクリプトを含めてから、

次の CSS コードを追加することで、q2 と q3 を非表示にすることができます。

#q2, #q3 { display: none }

jquery ライブラリを使用してそれらを表示する場合は、次のようにします。

$("#q2").show(); // where q2 is the id of your div
// or
$("#q1").hide(); // to hide the element

jquery を使用してこれらの操作を行うことを強くお勧めします。jquery は非常に最適で、学習/使用が簡単だからです。

于 2013-05-06T18:35:19.653 に答える
1

デモ: http://jsfiddle.net/abc123/4W7JT/

JS:

<script language=javascript type='text/javascript'> 
function hideDiv(id) { 
    if (document.getElementById) 
    { // DOM3 = IE5, NS6 
        document.getElementById(id).style.visibility = 'hidden'; 
    } 
    else 
    { 
        if (document.layers) { // Netscape 4 
            document.id.visibility = 'hidden'; 
        }    
        else { // IE 4 
        document.all.id.style.visibility = 'hidden'; 
        } 
    } 
}

function showDiv(id) { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById(id).style.visibility = 'visible'; 
    } 
    else { 
        if (document.layers) { // Netscape 4 
            document.id.visibility = 'visible'; 
        } 
        else { // IE 4 
            document.all.id.style.visibility = 'visible'; 
        } 
    } 
} 
</script>

HTML:

<body onload="javascript:hideDiv('q2');hideDiv('q3');">
    <div id="q1">
<p>1. Do you like red?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q1Yes" name="q1A" value="Yes" onchange="javascript:showDiv('q2');hideDiv('q3');"/>
              Yes</label><br>

              <label><INPUT type="radio" id="q1No" name="q1A" value="No" onchange="javascript:showDiv('q3');hideDiv('q2');"/>
              No</label>
</div>

<div id="q2">
<p>2. Do you like green?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q2Yes" name="q2A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q2No" name="q2A" value="No" />
              No</label>
</div>

<div id="q3">
<p>3. Do you like dessert?</p>

<div class="checkArea">
              <label><INPUT type="radio" id="q3Yes" name="q3A" value="Yes" />
              Yes</label><br>

              <label><INPUT type="radio" id="q3No" name="q3A" value="No" />
              No</label>
</div>
</body>
于 2013-05-06T18:38:48.420 に答える
-1

jQueryを使用しない場合:

document.onload = function() {
    document.getElementById("q1").style.display = "block";
    document.getElementById("q2").style.display = "none";
    document.getElementById("q3").style.display = "none";
};
于 2013-05-06T18:32:40.777 に答える