單選按鈕選擇更改事件不在MVC中觸發

Question

我試圖根據選擇單選按鈕來顯示隱藏圖像。但似乎jQuery腳本從未激發選擇變化。我的代碼看起來像下面

@Html.Label("Select Chart Type") 
      @Html.RadioButton("rbChartType", "1", isChecked: true) @Html.Label("Chart1") 
      @Html.RadioButton("rbChartType", "2", isChecked: false) @Html.Label("Chart2") 
<img src="@Url.Action("GetChart1")" alt="Billing Graph" class="img-responsive" id="imgChart1" /> 
     <img src="@Url.Action("GetChart2")" alt="Usage Graph" class="img-responsive" id="imgChart2" style="visibility:hidden" /> 

腳本

$(document).ready(function() { 
    $("input[name='rbChartType']").change(function() { 
     alert('hi'); 
     var selectedRadio = $("input[name='rbChartType']:checked").val(); 
     if (selectedRadio == 1) { 
      $('#imgChart1').show(); 
      $('#imgChart2').hide(); 
     } 
     else { 
      $('#imgChart1').hide(); 
      $('#imgChart2').show(); 
     } 
    }); 
}); 

我看不到我的警告射擊了！

Answer 1

首先，你不需要按名稱選擇單選按鈕（至少不是在事件處理程序中），如果你有很多單選按鈕，你可以用類名來完成。其次，如果您將元素設置爲visibility:hidden，則可以使用$("imgChart2").css('visibility', 'visible');再次顯示它。或者，也可以將其設置爲display:none並使用show()進行顯示。

試試這個：

@Html.Label("Select Chart Type") 
@Html.RadioButton("rbChartType", "1", isChecked: true) @Html.Label("Chart1") 
@Html.RadioButton("rbChartType", "2", isChecked: false) @Html.Label("Chart2") 

<img src="@Url.Action("GetChart1")" alt="Billing Graph" class="img-responsive" id="imgChart1" /> 
<img src="@Url.Action("GetChart2")" alt="Usage Graph" class="img-responsive" id="imgChart2" style="display:none" /> 

@section scripts{ 

<script type="text/javascript"> 

    $(function() { 

     $("input:radio").on("change", function() { 

      if ($(this).val() == "1") { 
       $('#imgChart1').show(); 
       $('#imgChart2').hide(); 
      } else { 
       $('#imgChart1').hide(); 
       $('#imgChart2').show(); 
      } 
     }); 

    }); 

</script> 


}