javascript - 单选按钮更改事件在 jquery && mvc 中不起作用

Question

我有两个单选按钮来确定付款方式。我想当单击“银行”单选按钮时显示相关链接，当单击“收费”时，显示帐户费用。我编写了以下代码:xaml:

@Html.RadioButton("PaymentType", "bank", true)payment from bank port @Html.ActionLink("connect and payment", "PaymentFactor", "PaymentFactor")
@Html.RadioButton("PaymentType", "charge", false)payment from account charge @Html.Display("txtcharge", " you account charge: " + TempData["charge"], null, new { id = "txtcharge" })

js:

<script type="text/javascript">
$(document).ready(function () {
    $("#txtcharge").hide();
    $("input:radio[name=PaymentType]").change(function () {
        window.alert($(this).val());
        if ($(this).val() == "bank") {
            $("#txtbank").show();
        }
        else {
            $("#txtbank").hide();
        }
        if (this.value == "charge") {
            $("#txtcharge").show();
        }
        else {
            $("#txtcharge").hide();
        }
    });
});

但是change事件不起作用。

更新:我的 html

    @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using StoreProject.Areas.User
<h2>Index</h2>
@if (!User.Identity.IsAuthenticated)
{
    Response.Redirect("~/Security/Login");
}
@if (TempData["Msg"] != null)
{
    <div class="alert alert-dismissable alert-info">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @TempData["Msg"].ToString()
    </div>
}
@if(Session["cart"] == null)
{
    Response.Redirect("~/Common/Home");
}
else
{
    long SumPrice = 0;
    if ((List<CartViewModel>)Session["cart"] != null)
    {
        foreach (CartViewModel item in (List<CartViewModel>)Session["cart"])
        {
            SumPrice += item.TotalPrice;
        }
            <div>
                total : @SumPrice 
            </div>
     @Html.RadioButton("PaymentType", "bank", true)<div>payment from bank port</div>
   <div id="txtbank">@Html.ActionLink("connect and payment", "PaymentFactor", "PaymentFactor")</div>    
        @Html.RadioButton("PaymentType", "charge", false)<div>payment from account charge </div>
   <div id="txtcharge">@Html.Display("txtcharge", " you account charge: " + TempData["charge"], null, new { id = "txtcharge" })</div>    
    }
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtcharge").hide();
        $("input[type=radio][name='PaymentType']").change(function () {
            window.alert($(this).val());
            if ($(this).val() == "bank") {
                $("#txtbank").show();
            }
            else {
                $("#txtbank").hide();
            }
            if (this.value == "charge") {
                $("#txtcharge").show();
            }
            else {
                $("#txtcharge").hide();
            }
        });
    });
</script>

Answer 1

更改您的选择器

$("input:radio[name=PaymentType]")

至

$("input[type=radio][name=PaymentType]")