在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();
    }
  });
}); 

我希望這段代碼對您有所幫助。