选择单选按钮时更改div可见性 [英] Change div visibility when radio button becomes selected

问题描述

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

I have a div and I want to show it when the user selects a specific radio button. Also, I need to hide the div when the user selects another radio button.

我尝试过了

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

由于某些原因，.click无法正常工作.我试图在每个函数中创建alert，但未触发警报.

For some reasons the .click is not working. I tried to make alert inside each function but the alert didn't fired.

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

I also tried to user .change but the same results.

我已经包含了jquery库，并且有很多jquery函数在起作用.

I already included the jquery library and I have alot of jquery functions working.

这里是所有代码:

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

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

编辑2

这是html

edit 2

this is the 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.就是这个

edit 3

for who needs the actual html. this is it

<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>

推荐答案

您需要用javascript中的ClientID而不是服务器ID，因为asp.net会为服务器控件生成新的CliendID，而选择器您不会因此而找到元素ID.

You need ClientID in javascript not the server id as asp.net will generate the new CliendID for server controls and the selector you have wont find element by that id.

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

修改

您拥有的代码正在运行.

The code you have is working.

实时演示

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

这篇关于选择单选按钮时更改div可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！