Question

我使用Microsoft图表，我有以下代码行来获取图表。

 <img src="@Url.Action("GetChart")" alt="Bar Chart using MVC" class="img-responsive" />

我有一个单选按钮列表，在更改选择后，我需要在同一个地方显示不同的图表。

<form method="post" id="frmFormType">
        @Html.Label("Select Chart Type")
        @Html.RadioButton("rbChartType", "1", isChecked: true) @Html.Label("First Option")
        @Html.RadioButton("rbChartType", "2", isChecked: false) @Html.Label("Second option")
    </form>

我不确定我是否可以在此＆＃34; rbChartType＆＃34;上使用jQuery更改功能。或使用利用表格的东西。我不是真的需要重新发布页面，而只是为了更改图表。当使用jQuery更改选择时，我不确定如何重新获取新图表。任何人都可以对此有所了解吗？感谢

Answer 1

同时拥有两张图片：

以这种方式制作：

$(function () {
  $("input").click(function () {
    $(".graph").addClass("hidden");
    $("#" + $(this).attr("value")).removeClass("hidden");
  });
});

img {display: block;}
.hidden {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="radio" name="graph" value="graph-1" /> Graph 1</label>
<label><input type="radio" name="graph" value="graph-2" /> Graph 2</label>
<img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%201&w=200&h=200" class="graph hidden" id="graph-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%202&w=200&h=200" class="graph hidden" id="graph-2" />

Answer 2

你可以尝试一下！

$(function(){
   $(":radio").click(function() { 
       //do something 
    }); 
})

如果上述解决方案不起作用，请使用浏览器调试查找正确的文档。通过这种方式，您可以使用jquery操作文档。

首先，如果你想通过点击无线电更改src的img，你必须得到每个RadioButton的srcs。 $（函数（）{ $（ “输入：电台”）点击（函数（）{。如果（$（本）。是（ “＃1”））{$（ “IMG ”）的CSS（ '背景'，SRC1）;}其他{$（“ IMG”）的CSS（ '背景'， SRC2）;}}）

更改单选按钮选择更改的图形 - ASP.NET MVC

2 个答案: