Question

如何利用js或jQuery控制标签的显示和隐藏？？

实例的代码是这样写的，得到这样的效果：

我想在点击checkbox的时候控制2个tr的显示和隐藏，我写了js代码，总是隐藏不了，于是我用了runat="server" visible="false"，就可以隐藏了，但我需要在前台控制，需要怎么做呢





Answer 1

首先有个建议，在两个tr之间不要有div，这是很不规范的写法。

其次推荐使用Jquery来写，很好实现。

最后，如果使用的是服务端控件CheckBox，那么在使用JS或Jquery之前，最好先在生成的源代码里核对一下控件的ID。

好了，废话不多说，如下代码能实现你的要求，希望对你有帮助：

<table>
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text="111"></asp:TextBox>
                </td>
            </tr>
            <tr class="trr">
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Text="222"></asp:TextBox>
                </td>
            </tr>
            <tr class="trr">
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" Text="333"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" Text="444"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </td>
            </tr>
        </table>
        <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#CheckBox1").change(function () {
                    if ($(this).attr("checked"))
                        $(".trr").hide();
                    else
                        $(".trr").show();
                });
            });
        </script>

Answer 2

按照你的思路Jquery实现：

HTML代码

<input type="checkbox" name="" id="" onchange="checkOperation(this)">

JS代码：

function checkOperation(dom) {
	if(dom.checked) {
		//jquery做法
		$("#TextBox3").attr("visible", false);
		$("#TextBox4").attr("visible", false);
	}else {
		//jquery做法
		$("#TextBox3").attr("visible", true);
		$("#TextBox4").attr("visible", true);
	}
}

Answer 3

var id= $("tr#id号，tr#id号");
$("#input[id='checkbox的ID号']").click(function(){
if($(this).attr("checked")){
id.hide();
}else{
id.show();
}
})

Answer 4

$("#CheckBox1").click(function(){
    $("#div_in").css("display","none");
});