<asp:CheckBox ID="cbTitle" runat="server" Text="按书名查找图书" />
            <div id="divTitle" style="margin:5px auto 15px 100px;font-size:small; display:none;">
                书名:<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
            </div>
            <hr />
            <asp:CheckBox ID="cbAuthor" runat="server" Text="按作者查找图书" />
            <div id="divAuthor" style="margin:5px auto 15px 100px; font-size:small; display:none;">
                作者:<asp:TextBox ID="txtAuthor" runat="server"></asp:TextBox>
            </div>
            <hr />
            <asp:CheckBox ID="cbPress" runat="server" Text="按出版社找图书"/>
            <div id="divPress" style="margin:5px auto 15px 100px; font-size:small; display:none">
                出版社:<asp:TextBox ID="txtPress" runat="server"></asp:TextBox>
            </div><hr />
            <asp:Button ID="btnOk" runat="server" Text="确定" CausesValidation="False" onclick="btnOk_Click"/>
            <asp:Button ID="btnReset" runat="server" Text="重置条件" CausesValidation="False" onclick="btnReset_Click" /><script type="text/javascript">
            $("input[type=checkbox]").change(function () {
                if ($(this).attr("checked")) {
                    $(this).next().next().show();//不知道有什么方法能更好的找到下一个div
                } else {
                    $(this).next().next().hide();
                }
            });
        </script>我有两个问题不懂,请高手教一教,感谢!
问题1:当我点击"确定"postback后,原本选中的checkbox状态还是被选中的,但是其下的div就被隐藏了, 我想在postback后选中的checkbox下的div是显示的,在前台尝试了很多次都不行?求高手代码..
问题2:有什么方法能更好的找到下一个div,而不是$(this).next().next(); 还有没有方法找到checkbox下的div里面的TextBox?

解决方案 »

  1.   

    楼主的好多服务端控件啊,(有点眼花)
     而且还带用 style 属性的。
      

  2.   

    //不知楼主是不是要这种效果,
    一名建义,楼主尽可能不要用asp:CheckBox  之类的控件。
    到时,你会发展:痛苦的是你自已。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type="text/css">
    div[WillBeChange=true]
    {
    margin:5px auto 15px 100px; font-size:small; display:none;
    }
    </style>
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
                $("#mainDiv").click(function (ev) {
                 ev = ev || window.event; // 事件
    var target = ev.target || ev.srcElement;  // 获得事件源 的html
    if($(target).attr("type") == "checkbox")
    {
    if($(target).attr("checked")==true)
    {
    $(target).parent().next().show();

    }
    else
    {
    $(target).parent().next().hide();
    //$(target).parent().nextUntil("div[WillBeChange=true]:first").hide();
    }
    }
                });
    });
    </script></head>
    <body>
    <form id="form1" runat="server">
    <div id="mainDiv"> 
    <asp:CheckBox ID="cbTitle" runat="server" Text="按书名查找图书" attr="title" />
    <!-- 我强加attr 属性,破使改变asp.net 引擎的解释方式,你要了解,可以删了  attr="title",并运行看源码-->
                <div id="divTitle" WillBeChange="true" >
                    书名:<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
                </div>
                <hr />
                <asp:CheckBox ID="cbAuthor" runat="server" Text="按作者查找图书" attr="author" />
                <div id="divAuthor"  WillBeChange="true">
                    作者:<asp:TextBox ID="txtAuthor" runat="server"></asp:TextBox>
                </div>
                <hr />
                <asp:CheckBox ID="cbPress" runat="server" Text="按出版社找图书" attr="press"/>
                <div id="divPress"  WillBeChange="true">
                    出版社:<asp:TextBox ID="txtPress" runat="server"></asp:TextBox>
                </div><hr />
                <asp:Button ID="btnOk" runat="server" Text="确定" CausesValidation="False" />
                <asp:Button ID="btnReset" runat="server" Text="重置条件" CausesValidation="False" />
    </div>
    </form>
    </body></html>
      

  3.   

    上面的看不清,看下面的吧。
    代码一样:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type="text/css">
    div[WillBeChange=true]
    {
    margin:5px auto 15px 100px; font-size:small; display:none;
    }
    </style>
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
      $("#mainDiv").click(function (ev) {
      ev = ev || window.event; // 事件
    var target = ev.target || ev.srcElement; // 获得事件源 的html
    if($(target).attr("type") == "checkbox")
    {
    if($(target).attr("checked")==true)
    {
    $(target).parent().next().show();}
    else
    {
    $(target).parent().next().hide();
    //$(target).parent().nextUntil("div[WillBeChange=true]:first").hide();
    }
    }
      });
    });
    </script></head>
    <body>
    <form id="form1" runat="server">
    <div id="mainDiv"> 
    <asp:CheckBox ID="cbTitle" runat="server" Text="按书名查找图书" attr="title" />
    <!-- 我强加attr 属性,破使改变asp.net 引擎的解释方式,你要了解,可以删了 attr="title",并运行看源码-->
      <div id="divTitle" WillBeChange="true" >
      书名:<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
      </div>
      <hr />
      <asp:CheckBox ID="cbAuthor" runat="server" Text="按作者查找图书" attr="author" />
      <div id="divAuthor" WillBeChange="true">
      作者:<asp:TextBox ID="txtAuthor" runat="server"></asp:TextBox>
      </div>
      <hr />
      <asp:CheckBox ID="cbPress" runat="server" Text="按出版社找图书" attr="press"/>
      <div id="divPress" WillBeChange="true">
      出版社:<asp:TextBox ID="txtPress" runat="server"></asp:TextBox>
      </div><hr />
      <asp:Button ID="btnOk" runat="server" Text="确定" CausesValidation="False" />
      <asp:Button ID="btnReset" runat="server" Text="重置条件" CausesValidation="False" />
    </div>
    </form>
    </body></html>