单选按钮列表单击显示隐藏标签控件

时间:2012-09-18 19:28:30

标签: jquery asp.net

如果单选按钮列表值为'N',我试图显示/隐藏Label控件。代码工作正常,但是当我取消选中单选按钮时,Label控件不会隐藏。我也使用Jquery mousedown事件来清除选择。请建议。

var radioList = "#<%= radioLst1.ClientID %>";
  var lblID = document.getElementById('<%=LblIDNumber.ClientID%>');

    $(radioList + " input:radio").click(function (e) {
        if ($('#<%= radioLst1.ClientID %> input:checked').val() == "N") {
            lblID.style.display = $(this).attr("checked") ? 'inline' : 'none';
        }
        else {
            lblID.style.display = 'none';
        }
    });

我使用以下代码清除单选按钮列表的选择。

 $(radioList + " input:radio").mousedown(function (e) {
        if ($(this).attr("checked") == true) {
            setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);
            lblID.style.display = 'none';
        }
        else {
            return true
        }
    });

                <asp:Label ID="LblIDNumber" style="display:none" runat="server">Number</asp:Label>

                <asp:RadioButtonList ID="radioLst1" runat="server">
                    <asp:ListItem Value="U">Unknown</asp:ListItem>
                    <asp:ListItem Value="N">Not Applicable</asp:ListItem>
                </asp:RadioButtonList>

2 个答案:

答案 0 :(得分:0)

您不应该将事件附加到radioLst1.ClientID这将被asp.net翻译成表格

您可以像这样简化流程

var lblID = $('#mylabel');


 $('input:radio').on('click', function(){

   if($(this).val() == 'N')
   {
   lblID.hide();
  }else{
  lblID.show();
  }       

 });

你控制

<label id="mylabel">This is a label</label>

 <input id="radioLst1_0" type="radio" value="U" name="radioLst1">
  <label for="radioLst1_0">Unknown</label>

 <input id="radioLst1_1" type="radio" value="N" name="radioLst1">
     <label for="radioLst1_1">Not Applicable</label>

这是一个有效的fiddle

答案 1 :(得分:0)

您可以将所有这些包装到UpdatePanel中。然后为每个按钮点击事件后面的代码(您可以将它们全部订阅到同一事件),然后将标签绑定到按钮的.Checked属性。 UpdatePanel将使所有内容都异步。

我建议将其作为javascript / jquery的替代品。它会更清洁,更容易管理。在开始时稍微加一点标记然后进行更改将非常容易。