Asp 单选按钮不调用 javascript 函数

Question

我正在使用 asp :radio 按钮。我正在尝试使用 2 个单选按钮，以便如果选择其中任何一个按钮，则其他选项将被取消选中。我在这些按钮的更改事件上调用 JavaScript 函数。该函数将添加一些值并在文本框中返回输出。我尝试使用普通的 asp 按钮，然后切换到单选按钮组，现在尝试单选按钮列表。需要在单选按钮更改事件上调用 javascript 函数。这些按钮将选中和未选中，但 java 脚本函数没有返回正确的值。我猜有些命名约定不正确或某些东西不起作用。期待帮助解决这个问题。这 3 种方法中的任何一种都不起作用。

我的 test.aspx 文件包含

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="span2">Test Career:</div>
                <div class="span8">
                <asp:RadioButton ID="TestCareerList" runat="server" clientmode=Static Text="MasterDegree">    

                </div>
           </ContentTemplate>
 </asp:UpdatePanel>

aspx页面中的Document.ready函数

$(document).ready(function () {
  $("input:radio").click(function () 
{
updateYears();
}
}

javascript function is:

    function updateYears() {
        var yrsDocTemp = parseFloat(yrsDoc);
        var yrsMastTemp = parseFloat(yrsMast);


        if ($("ContentPlaceHolder2_drpEmplClass").val() != "" && $("#ContentPlaceHolder2_StudentCareerList]").SelectedValue!= "") {
            var updateValue = 0;

            //Get EmplCalss
            if ($("#ContentPlaceHolder2_drpEmplClass").val() == "GA") {
                updateValue = updateValue + 1;
            }
            else if ($("#ContentPlaceHolder2_drpEmplClass").val() == "GAF" || $("#ContentPlaceHolder2_drpEmplClass").val() == "GAP") {
                updateValue = updateValue + .5;
            }


            if ($("#ContentPlaceHolder2_Career").Text =="DoctoralDegree")
                {
                yrsDocTemp = yrsDocTemp + updateValue;
            }

            else if ($("#ContentPlaceHolder2_Career").Text == "MastersDegree") {

                yrsMastTemp = yrsMastTemp + updateValue;
            }

        }

        //Update the fields
        $("#ContentPlaceHolder2_drpYearsDoctoral").val(yrsDocTemp);
        $("#ContentPlaceHolder2_drpYearsMasters").val(yrsMastTemp);
    }

I am calling this function under document.ready function like this-



    $("input:RadioButtonList[ID=^TestCareerList").change(function(){
                    updateYears();
                });

                $("#ContentPlaceHolder2_drpEmplClass").change(function () {
                    updateYears();
                });


When I debug the javascript code I see the names of buttons have been changed.

    <tr>
                <td>
                <input id="ContentPlaceHolder2_TestCareerList_0" type="radio" name="ctl00$ContentPlaceHolder2$TestCareerList" value="MastersDegree" />
                <label for="ContentPlaceHolder2_TestCareerList_0">Master</label>
                </td>
                <td><input id="ContentPlaceHolder2_TestCareerList_1" type="radio" name="ctl00$ContentPlaceHolder2$TestCareerList" value="DoctoralDegree" />
                <label for="ContentPlaceHolder2_TestCareerList_1">Doctoral</label>
                </td>
    </tr>

    Kindly looking for help.

Answer 1

这是试图绑定到你的服务器端元素：

$("input:RadioButtonList[ID=^TestCareerList")

但是 JavaScript 不知道服务器端代码。它仅在客户端代码上运行。而且，正如您所注意到的，您的客户端 HTML 是不同的。所以你的 JavaScript 需要以 那个 代码为目标。像这样的：

$("input:radio[ID=*TestCareerList")

对于您拥有的任何其他选择器也是如此。正如您所发现的，WebForms 控件在精细控制您的客户端代码方面不是很好。 ASP.NET MVC 使这变得容易得多，但对于您正在做的事情来说可能是一个非常根本的转变。

可能有帮助的是将某些控件上的ClientID 属性设置为Static。但是，在执行此操作时要小心并相应地调试您的 HTML，因为如果您的 HTML 中出现重复的 id 值，那么它是无效的，并且在选择 id 时 JavaScript 的行为将是未定义的。