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