JQuery ASP 隐藏的问题

Question

根据复选框的结果，我想隐藏/显示一个隐藏的表（在页面加载中隐藏），询问更多信息。

JQuery 和 ASP 在下面，有人可以指出我正确的方向，让我知道我在这种方法上做错了什么。

.ASP

<h3>Table Heading</h3>
    <asp:Table ID="tbl1" runat="server">
        <asp:TableHeaderRow>
            <asp:TableHeaderCell>
                <h4>One</h4>
            </asp:TableHeaderCell>
        </asp:TableHeaderRow>
                    <asp:TableRow>
            <asp:TableCell>
                <asp:CheckBox ID=""Yes" runat="server" Checked="false" Text="Yes" />
                <asp:CheckBox ID="No" Text="No" runat="server" Checked="false" />
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="tbl2" runat="server" Visible="false">
        <asp:TableHeaderRow>
            <asp:TableHeaderCell>
                <h4>Additional information</h4>
            </asp:TableHeaderCell>
        </asp:TableHeaderRow>
        <asp:TableRow>
            <asp:TableCell><asp:TextBox ID="AddInfo" runat="server" TextMode="MultiLine"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
    </asp:Table>

杰奎里

<script type="text/javascript">
    function toggleTable()
    {
        $(function () {
            $("#Yes").click(function () {
                $("#tbl2").show();
            })
            $("#No").click(function () {
                $("#tbl2").hide();
        })
    }
</script>

更新 1正如建议的那样，我删除了包装功能，但这仍然不起作用。

<script type="text/javascript">
        $(function () 
        {
            $("#Yes").click(function () {
                $("#tbl2").show();
        })
            $("No").click(function () {
                $("#tbl2").hide();
            })
        })
</script>

原始网页

<h3></h3>
    <table id="MainContent_tbl1">
<tr>
    <th>
                <h4></h4>
            </th>
</tr><tr>
    <td><input id="MainContent_Yes" type="radio" name="ctl00$MainContent$Yes" value="Yes" />
    <label for="MainContent_Yes">Yes</label><input id="MainContent_No" type="radio" name="ctl00$MainContent$No" value="No" />
    <label for="MainContent_No">No</label></td>
</tr>

Answer 1

当您在服务器控件中使用visible=false时，它已经这样做了 - 它在呈现时从页面中完全删除了该控件。

有关可见属性的详细信息 - 如果此属性为 false，则服务器 控件不呈现。在以下情况下，您应该考虑到这一点 组织页面的布局。如果容器控件不是 呈现时，即使 将单个控件的 可见 属性设置为 true。- http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible（v=vs.100）.aspx

所以我建议，如果你正在显示/隐藏服务器端代码，那么设置属性（CSS）样式=显示无。如果您直接使用可见属性并将其设置为 false，它将从页面中删除控件，将无法显示在页面中。

例如 tbl1.Attributes.Add("style", "display:none");

在客户端使用 style=display:none" 而不是 visible=false 隐藏它。

另外，使用 .ClientID 获取 jquery 选择器的确切渲染 ID。喜欢

$("#<%=tbl1.ClientID%>").show();

Answer 2

去掉toggleTable()包装函数，它应该按照你的建议工作。

$(function () {在文档准备就绪时运行，此时应打开单击侦听器。

我还要指出，逻辑是有缺陷的。复选框都可以打开，因此您可能希望改用单选按钮，以便只能选中一个。

Answer 3

在你的jquery中，通过ClientID获取一切，因为它是asp，它会重命名它（如你所见，它已将MainContent_添加到你的控制ID中），所以这样做：

$("<%=tbl2.ClientID %>").click{....

或者将 ClientIDMode = "静态" 添加到您的控件中，例如：

<asp:Table ID="tbl1" runat="server" ClientIDMode = "Static">