无法隐藏和显示使用jquery的文本框

我面临一些问题隐藏和显示文本框使用jquery在c＃.Program不显示任何错误，但当我点击单选按钮文本框不隐藏。这里是我的源代码请帮我解决这个问题。我是jquery的新手。无法隐藏和显示使用jquery的文本框

<%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%> 
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
<head> 
<script src="Scripts2/jquery-1.7-vsdoc.js"></script> 
<script src="Scripts2/jquery-1.7.js"></script> 
<script src="Scripts2/jquery-1.7.min.js"></script> 
<script type="text/javascript"> 
     $(function() { 
     $('input[name="type"]').on('click', function() { 
     if ($(this).val() == 'Experienced') { 
      $('#txtcomp').Show(); 
      $('#txtfrom').Show(); 
      $('#txtto').Show(); 

     } else { 
     $('#txtcomp').hide(); 
      $('#txtcomp').hide(); 
      $('#txtfrom').hide(); 
      $('#txtto').hide(); 

     } 
    }); 
    </script> 
    </head>  
    <div class="container-fluid"> 
<div class="row-fluid"> 
      <div class="well span5 center login-box"> 
       <div class="alert alert-info"> 
       <b><font size="4">ADD EXPERIENCE DETAILS</font></b> 
       </div> 
       <form id="form1" runat="server"> 

       <asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate> 
       <div> 
        <ajaxToolkit:ToolkitScriptManager runat="server"> 
        </ajaxToolkit:ToolkitScriptManager> 

        <asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel> 


        <fieldset> 

         <table class="ui-accordion"> 

           <tr> 
           <td align="left" class="style2"> 
           </td> 
           <td align="left"> 
           <input type="radio" name="type" value="Fresher" />Fresher 
           <input type="radio" name="type" value="Experienced" />Experienced 
           </td> 
          </tr> 
          <tr> 
           <td align="left" class="style2"> 
            Company</td> 
           <td align="left"> 
           <div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip"> 
            <asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox> 
           </td> 
          </tr> 
          <tr> 
           <td align="left" class="style2"> 
            From Date</td> 
           <td align="left"> 
           <div class="input-prepend" title="Enter District Name" data-rel="tooltip"> 
            <asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox> 
            <ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

           </td> 
          </tr> 
          <tr> 
           <td align="left" class="style2"> 
            To Date</td> 
           <td align="left"> 
           <div class="input-prepend" title="Enter District Name" data-rel="tooltip"> 
            <asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox> 
            <ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

           </td> 
          </tr> 
     <tr> 
           <td class="style2"> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
            &nbsp; </td> 
           <td align="left"> 
            &nbsp;<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add" 
            Height="36px" Width="74px" onclick="Button1_Click" /> 
            &nbsp;&nbsp;&nbsp; 
            <asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel" 
            Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" /> 
           </td> 
          </tr> 
          <tr> 
           <td class="style2"> 
            &nbsp;</td> 
           <td align="left"> 
            <asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label> 
           </td> 
          </tr> 
         </table> 
         </div> 
         </ContentTemplate> 
         </asp:UpdatePanel> 


         </fieldset> 
       </form> 

      </div><!--/span--> 
     </div><!--/row--> 
     </div> 
    </div> 

    </asp:Content>

来源

2014-10-06 Dwane Marsh

请对此进行确认......

的Javascript

$(document).ready(function() { 
$(".text").hide(); 
$("#r1").click(function() { 
    $(".text").show(); 
}); 
$("#r2").click(function() { 
    $(".text").hide(); 
}); 
});

的Html

<p>Show textboxes 
<input type="radio" name="radio1" id="r1" value="Show">Do nothing 
<input type="radio" name="radio1" id="r2" value="Nothing"> 
</p>Wonderful textboxes: 
<div class="text"> 
<p>Textbox #1 
    <input type="text" name="text1" id="text1" maxlength="30"> 
</p> 
</div> 
<div class="text"> 
<p>Textbox #2 
    <input type="text" name="text2" id="text2" maxlength="30"> 
</p> 
</div>

来源

2014-10-06 10:16:22 rosy

@Dwane plz检查这个... – rosy 2014-10-06 10:21:50

@Dwane对不起亲爱的朋友.. – rosy 2014-10-06 10:31:03

k没问题玫瑰。从早上我就坐在这:)） – 2014-10-06 11:01:35

你可以做到这一点，如下图所示： -

$('#<%= txtcomp.ClientID %>').hide();

由于这里给出更详细的答案Accessing Asp.net controls using jquery (all options)

以上ASPX代码时，在页面的变化呈现给

<input type="text" id="ctl00_Main_txtcomp'" name="ctl00$Main$mtxtcomp'" />

这是因为.net控件所在的主控和控制信息被预先占用，这使得我们编写选择器有点棘手。

您有几个选项。这并不全面，但我会试一试。

选项1：

$('#<%= txtcomp.ClientID %>')

使用客户端ID - 推荐，但咩..没有这么多。如果可以，我会尽量避免写入ClientID。主要原因是，你只能在.aspx页面中使用它，而不能使用外部的.js文件。

选项2：

$('[id$=txtcomp]') // id which ends with the text 'txtcomp' 

$('[id*=txtcomp]') // id which contains the text 'txtcomp'

选项3：

使用的CssClass - 强烈推荐。因为使用类的选择器很干净而且不复杂。

如果您想知道，CssClass for .net控件与传统html控件的类相同。

<asp:TextBox runat="server" ID="txtcomp" CssClass="myclass" /> //add CssClass 

$('.myclass') //selector

3选项：

使用的ClientIDMode = “静态”，这得到了在.NET框架4.0中引入的，在控制，这样它的ID将保持不变。 - 也推荐。

<asp:TextBox runat="server" ID="txtcomp" ClientIDMode="Static" /> //add ClientIDMode 

$('#txtcomp') //use the normal ID selector

来源

2014-10-06 05:12:08 Neel

尼尔，其原因我只是改变单选按钮来checkbox.when我跑我只是点击复选框程序正常工作后，我只是选择下拉菜单然后在刷新后刷新页面我再次选择复选框，然后复选框颜色变为蓝色，文本框不隐藏并显示 – 2014-10-06 06:47:51

这可能有助于.......

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<select id="select" height="30px" style="width: 90px"> 
<option>--select - </option> 
<option value="1">1</option> 
<option value="3">3</option> 
</select> 

<input type=”text” class=”1″ /> 
<input type=”text” class=”1″ /> 
<input type=”text” class=”2″ /> 
<input type=”text” class=”2″ /> 
<input type=”text” class=”2″ /> 
<input type=”text” class=”2″ /> 

<script> 
$(document).ready(function(){ 
$(“.1″).hide();$(“.2″).hide(); 
}); 
$(“#select”).change(function(){ 
var val = $(this).val(); 
if(val==1){$(“.1″).show(); 
$(“.2″).hide(); 
} 
else if(val==3){ 
$(“.1″).show(); 
$(“.2″).show(); 
} 
else{ 
$(“.1″).hide();$(“.2″).hide(); 
} 
}); 
</script>

来源

2014-10-06 06:51:31 rosy

玫瑰色，对不起，我没有得到任何东西.. – 2014-10-06 06:55:09

在html中，

<在Javascript中，$（“。hidden”）。hide（）;}在javascript中，输入类型=“checkbox”class =“show”/> （）。（this）.next（）。toggle（）; }）; – rosy 2014-10-06 07:01:34

这将肯定帮助你...

<html> 
<head> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#enable').click(function() { 
     $('#textBox').removeAttr("disabled") 
    }); 
    $('#disable').click(function() { 
     $('#textBox').attr("disabled", "disabled"); 
    }); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="textBox" /> 
<button id="enable">Enable</button> 
<button id="disable">Disable</button> 
</body> 
</html>

来源

2014-10-06 07:06:21 rosy

玫瑰色，请从我的个人资料中查看我的位置我认为我们在附近。 – 2014-10-06 07:08:42

玫瑰色，K让我检查我的代码 – 2014-10-06 07:09:40

玫瑰色，对不起没有办法..不工作 – 2014-10-06 07:16:45

无法隐藏和显示使用jquery的文本框

回答

相关问题