0

次のようなコードがあります。

<html>
<SCRIPT language="javascript">

function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "line");


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Line");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "pie");

    var foo = document.getElementById("fooBar2");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Pie");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "trend");

    var foo = document.getElementById("fooBar3");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Monthly Trend");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "heatmap");


    var foo = document.getElementById("fooBar4");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);

}


function add2() {



  var d = document.getElementById('fooBar');
  var olddiv = document.getElementById("feed");
  d.removeChild(olddiv);

     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "hidden");
    element.setAttribute("name", "comparison");
    element.setAttribute("name", "comparison");
    element.setAttribute("value", "comparison");


    var foo = document.getElementById("fooBar5");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



 }

</script>
 <br/>
<p align="left" id="status"><strong>Report type:</strong></p>
 <input type="radio" name="feed" id="feed" value="comparison" onclick="add2()" /> Comparison Report
<br/>
<br/>
<input type="radio" name="feed" id="feed" value="daily" onclick="add()" /> Individual Reports
<br/>
<form method="post" action ="http://localhost/ana/node/47">
<span id="fooBar">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar2">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar3">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar5">&nbsp; &nbsp; &nbsp; &nbsp;</span>
 <br />
 <br/>
  <p>
    <input type="submit" name="submit" id="submit" value="Next" />
  </p>

</form> 
</div>

 </html>

html ページを開くと、次のようになります。

  • 比較レポート
  • 個別報告書

個別レポートをクリックすると、次のようになります。

  • 比較レポート
  • 個別報告書
    • ライン
    • パイ
    • 月次トレンド
    • ヒートマップ

私の質問は、個別レポートから比較レポートに選択を変更するときに、そのチャイルズ ラジオ ボタン (線、円グラフ、月次トレンド、およびヒートマップ) と一緒にラベルを削除する方法です。

4

1 に答える 1

1

私があなたの質問を正しく理解していれば、ラジオボタンを備えたある種のアコーディオンが必要です。

このコードはそれらを削除するのではなく、非表示にしますが、それは本当にあなたが求めているものだと思います.

このコードにはjQueryが必要です。これは、検討する必要があると思います。

http://jsfiddle.net/NHDmf/1/

可能な限り動的で独立したものにしたので、比較リストと個別リストにオプションを追加し続けることができます.

于 2012-09-03T06:16:21.530 に答える