选择单选按钮时更改div可见性

Question

我有一个div，我想在用户选择特定的单选按钮时显示它。此外，当用户选择另一个单选按钮时，我需要隐藏div。

我试过了;

$("#RdbToday").click(function () {
        $("#dateSelectorSpan").hide();
    }); 
    $("#RdbDateRange").click(function () {
        $("#dateSelectorSpan").show();
    });

由于某些原因，.click无效。我尝试在每个函数中设置alert，但警报未触发。

我也尝试使用.change，但结果相同。

修改

我已经包含了jquery库，并且我有很多jquery函数可以工作。

这里是所有代码：

$(document).ready(function () {
    //LoadCallsPerCampign();
    //showTotalCallsStatuses();
    //showInboundCalls();
    //LoadServiceLevel();

    $("#RdbToday").change(function () {
        $("#dateSelectorSpan").hide();
    }); 
    $("#RdbDateRange").change(function () {
        $("#dateSelectorSpan").show();
    });
})

编辑2

这是html

<asp:RadioButton runat="server" ID="RdbToday" Text="Today" Font-Names="Calibri" GroupName="foo"/>
                <asp:RadioButton runat="server" ID="RdbDateRange" Text="Date Range:" Font-Names="Calibri" GroupName="foo"/>
                <span id="dateSelectorSpan">
                    <input type="text" id="CldrFrom" runat="server" clientidmode="Static" placeholder="From" style="width:15%" />
                    <input type="text" id="CldrTo" runat="server" clientidmode="Static" placeholder="To" style="width:15%"/>
                </span>

编辑3

谁需要实际的HTML。这是它

<span style="font-family:Calibri;"><input id="RdbToday" type="radio" name="foo" value="RdbToday"><label for="RdbToday">Today</label></span>
<span style="font-family:Calibri;"><input id="RdbDateRange" type="radio" name="foo" value="RdbDateRange"><label for="RdbDateRange">Date Range:</label></span>
<span id="dateSelectorSpan">
                    <input name="CldrFrom" type="text" id="CldrFrom" placeholder="From" style="width:15%">
                    <input name="CldrTo" type="text" id="CldrTo" placeholder="To" style="width:15%">
                </span>

Answer 1

你需要javascript中的ClientID而不是服务器ID，因为asp.net会为服务器控件生成新的CliendID，而你找不到该id的元素。

$("#<%= RdbToday.ClientID %>").change(function () {
    $("#dateSelectorSpan").hide();
}); 
$("#<%= RdbDateRange.ClientID %>").change(function () {
    $("#dateSelectorSpan").show();
});

修改

您拥有的代码正在运作。

Live Demo

$("#RdbToday").change(function () {
    $("#dateSelectorSpan").hide();
});
$("#RdbDateRange").change(function () {
    $("#dateSelectorSpan").show();
});