Question

我有这样的代码：

<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页面时，就像这样：

比较报告
个人报告

当我们点击个人报告时，它将是这样的：

比较报告
个人报告
- 行
- 饼
- 每月趋势
- 热图

我的问题是，当我将选择从个人报告更改为比较报告时，如何删除子项单选按钮（行，饼图，月度趋势图和热图）以及实验室？

Answer 1

如果我正确理解你的问题，你需要一些带有无线电按钮的手风琴。

这段代码不会删除它们，它会隐藏它们，但我认为这就是你所追求的。

此代码需要jQuery，这是我认为您应该查看的内容。

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

我将其设置为动态且独立，因此您可以继续向Comparisson和Individual列表添加选项。

动态添加更多单选按钮并将其删除

1 个答案: