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

尝试使用click and prop＆amp;一些代码重构

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

我希望这段代码可以帮到你。

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

4 个答案: