javascript - 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>

JQuery

<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>

原始 HTML

<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时在服务器控件中，它已经做到了这一点 - 它在呈现时从页面中完全删除了该控件。

More about Visible property - If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page. If a container control is not rendered, any controls that it contains will not be rendered even if you set the Visible property of an individual control to true. - http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible(v=vs.100).aspx

所以我建议，如果您要从服务器端代码显示/隐藏，则设置属性 (CSS) style= display none 。如果直接使用visible属性并将其设置为false，则会将控件从页面中移除，从而无法在页面中显示。

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

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

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

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