显示/隐藏 div 使用 jQuery 基于 ASP.NET 单选模式选择价值 (价值是相反由于某种原因)

发布时间: 2017/3/26 4:23:57
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想隐藏/显示一个 div,基于我 No/Yes ASP.NET 单选模式选择值。我的代码是当上 '不' 项目没有引导积极类。当它是 '不' 项目由于某种原因当用户选择是值落得被 '不'...这里是我的代码︰

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
    <asp:ListItem Text="No" Value="No" Selected="true" class="btn btn-default active"></asp:ListItem>
    <asp:ListItem Text="Yes" Value="Yes" class="btn btn-default"></asp:ListItem>
</asp:RadioButtonList>

$('#<%=RadioButtonList1.ClientID%>').click(function () {
    debugger;
    var value = $("#<%= RadioButtonList1.ClientID %> input:checked").val();
    if (value == "Yes") {
        $('#<%=Panel1.ClientID%>').hide();
    }
    if (value == "No") {
        $('#<%=Panel1.ClientID%>').show();
    }
});

一旦生成代码并将其发送到客户端︰

<span id="GlobalContent_MainContent_RadioButtonList1" class="btn-group" data-toggle="buttons">
    <span class="btn btn-default active">
        <input id="GlobalContent_MainContent_RadioButtonList1_0" type="radio" name="ctl00$ctl00$GlobalContent$MainContent$RadioButtonList1" value="No" checked="checked">
        <label for="GlobalContent_MainContent_RadioButtonList1_0">No</label>
    </span>
    <span class="btn btn-default">
        <input id="GlobalContent_MainContent_RadioButtonList1_1" type="radio" name="ctl00$ctl00$GlobalContent$MainContent$RadioButtonList1" value="Yes" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$GlobalContent$MainContent$RadioButtonList1$1\',\'\')', 0)"><label for="GlobalContent_MainContent_RadioButtonList1_1">Yes</label>
    </span>
</span>

解决方法 1:

您单击处理程序上的容器,这可能是问题的根源。

  1. 更新到您事件listener change 事件而不是 click 事件。
  2. 因为你在听 change ,你要到哪里的变化将触发器的实际输入更新选择器。

更新的 JS/ASP:

$('#<%=RadioButtonList1.ClientID%> input').change(function () {
    var $input = $(this),
        $target = $('#<%=Panel1.ClientID%>'),
        value = $input.val();

    if (value === "Yes") {
        $target.hide();
    } else {
        $target.show();
    }
});

在这里是基于生成的代码运行的示例︰

演示︰JSFiddle


重要提示︰

在几乎所有情况下,我会建议不要混合服务器端生成的代码与您的 JavaScript。 有很多理由,为什么你想要分开两个,但是,将不属于你的问题的范围。

官方微信
官方QQ群
31647020