使用单选按钮显示/隐藏内容

我有JSONforms的数据，我正在尝试使用D3.js可视化它。 我想让用户选择他们查看数据的图形。我试图在两者之间进行平滑过渡，所以我决定用单选按钮来做。 这是我得到的：

$(document).ready(function () { if ($("input[name='chart']:checked").val() == 'pie') { // ... Graph 1 } else if ($("input[name='chart']:checked").val() == 'bar') { // ... Graph 2 } }); 

的jsfiddle

这显示了加载时检查其单选按钮的图形。 但是，当我单击按钮时，它们不会更改。 我做了一些研究，发现我可能需要包含change（）函数。 这是我尝试过的：

 $(document).ready(function () { $("input[name=chart]:radio").change(function () { if ($("#chart1Pie").attr("checked")) { // ... Graph 1 } else if ($("#chart1Bar").attr("checked")) { // ... Graph 2 } }); }); 

的jsfiddle

这有一些问题。 1）加载页面时不加载所选图形。 2）单击单选按钮时，仅显示饼图。 3）单击其他单选按钮时，上一个图形不会消失; 它只是把新的一个放在它下面。

我查看了几个StackOverflow问题，但没有一个能解决问题。 有人可以帮我吗？ 谢谢！

Answer 1

你有3件事要做才能使它发挥作用。

1：在进入第一个条件之前，请执行以下操作：

 $('#chart').empty(); 

2：而不是：

 if ($("#chart1Pie").attr("checked")) 

做：

  if ($("#chart1Pie").is(":checked")) 

3：在声明.change()函数之后，插入：

 $('input:radio:first').trigger('change'); 

它会触发它并显示图形。

小提琴： http ： //jsfiddle.net/k3WJN/13/