使用复选框列表切换 div 可见性答案

【问题标题】：toggle div visibility with a checkbox list使用复选框列表切换 div 可见性
【发布时间】：2010-10-16 21:17:15
【问题描述】：

我有一个 Web 应用程序（ASP.NET2.0 C#）。在其中，我有一个 div，其中包含一个复选框列表和一个按钮。

我想切换 div 查看，所以我在网上找了一些 javascript 代码来帮助我。

代码如下：

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

    if (state == 'visible') 
    {
        state = 'hidden';
    }
    else 
    {
        state = 'visible';
    }
    if (document.all) 
    { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) 
    { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) 
    {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}
</script>

我这样调用函数：

<a href="javascript://" onclick="showhide('AlertDiv');">Choose Columns</a>

当我使用此功能时，它会显示带有按钮的 div，但不会显示复选框列表....关于发生了什么的任何想法？

谢谢。

【问题讨论】：

标签： asp.net javascript viewstate visibility checkboxlist

【解决方案1】：

您是否尝试过使用显示而不是可见性？

例如，而不是：

document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";

用途：

document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";

您必须将所有对可见性的引用替换为 display 而不仅仅是 getElementById 版本。您可能还想考虑使用jQuery，它将通过几行代码来处理您的场景，而且不需要 onclick 属性来覆盖您的 html。

<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.toggleLink').click(function(e) {
       e.preventDefault();
       $('#AlertDiv').toggle();
    });
  });
</script>
<a href="#" class="toggleLink">Choose Columns</a>

【讨论】：

我同意。我一直这样做，我使用显示。这种方式兼容IE6/FF...

【解决方案2】：

一些建议：

您真的应该考虑使用像ASP.NET AJAX 或JQuery 这样的javascript 库。这将有助于消除浏览器特定的代码。
可见性基于复选框的状态，而不仅仅是切换它。
在这种情况下，“显示”可能是比“可见性”更好的样式。如果你使用“可见性”，那么你只会得到一个空白区域，当它不可见时，“层”应该是。
您可能希望传入 div 标签的 id 和复选框的 id，而不是“层引用”。

asp.net ajax 中的示例：

这是您的复选框：

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />

这是您要显示/隐藏的区域：

<div id='mylayer'>content</div>

这是你的功能：

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>

【讨论】：