在ASP.NET/C#中检查复选框服务器控件时隐藏文本框-使用Jquery或Javascript

Question

我一直试图隐藏一个文本框，如果再次选中一个复选框则显示该文本框，如果未选中该复选框，则源代码如下所示。

   <asp:CheckBox ID="ShortStoryCheckBox" runat="server" />
<asp:TextBox ID="LeadTextBox" runat="server" Height="77px" TextMode="MultiLine" 
        Width="370px"></asp:TextBox>

所以我的目的是如果选中ShortStoryCheckBox，则隐藏LeadTextBox。 如果再次取消选中，则必须显示它。 为了实现这一点，我尝试了下面的JQuery。 我使用的ID下方是从浏览器的源视图获取的HTML ID。

<script type="text/javascript">
    $("#ctl00_PlaceHolderMain_Home_ShortStoryCheckBox").change(function () {
        if (this.checked) {
            $("#ctl00_PlaceHolderMain_Home_LeadTextBox").hide();
        }
        else {
            $("#ctl00_PlaceHolderMain_Home_LeadTextBox").show();
        }
    });
</script>

但是它不起作用，有人可以帮我怎么做吗？ 还是我要去哪里错了？ 任何其他建议也可以帮助实现这一目标。

Answer 1

尝试点击和支持以及一些代码重构

<script type="text/javascript">

$(document).ready(function(){

    $("#<%= ShortStoryCheckBox.ClientID %>").click(function () {
        if ($(this).prop("checked")===true) {
            $("#<%= LeadTextBox.ClientID %>").hide();
        }
        else {
             $("#<%= LeadTextBox.ClientID %>").show();
        }
    });
 });
</script>

Answer 2

工作jsfiddle： http : //jsfiddle.net/patelmilanb1/AJvJD/

$(document).on("change", "#ShortStoryCheckBox", function () {
    if ($(this).is(":checked")) {
        $("#LeadTextBox").hide();
    } else {
        $("#LeadTextBox").show();
    }
});

第二种方法：

$(document).on("change", "#ShortStoryCheckBox", function () {
    $("#LeadTextBox").toggle();
});

注意：您可以将类名称分配给文本框和复选框，以简化使用

Answer 3

您必须使用ShortStoryCheckBox和LeadTextBox的ClientID，它获取由ASP.NET生成的HTML标记的控件ID。

$("#<%=ShortStoryCheckBox.ClientID%>").change(function(){
 if($(this).is(":checked"))
 {
    $('#<%= LeadTextBox.ClientID %>').hide();
 }
 else
 {
    $('#<%= LeadTextBox.ClientID %>').show();
 }
});

Answer 4

您可以使用这种方式。

$(document).ready(function() { 
  $('#<%=ShortStoryCheckBox.ClientID%>').bind('click', function() {
    if($(this).is(":checked")) {
      $("#<%=LeadTextBox.ClientID%>").show();
    } else {
      $("#<%=LeadTextBox.ClientID%>").hide();
    }
  });
}); 

我希望这段代码对您有所帮助。