使用復選框列表切換 div 可見性

Question

我有一個 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>

我這樣稱呼 function：

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

當我使用這個 function 時，它向我顯示了帶有按鈕的 div，但它沒有向我顯示復選框列表......關於發生了什么的任何想法？

謝謝你。

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

Answer 2

一些建議：

1. 您真的應該考慮使用 javascript 庫，例如ASP.NET AJAX或Z6A2D7208853DAFFCB96FB5A7382B0C7 。 這將有助於消除瀏覽器特定的代碼。
2. 基於復選框的 state 的可見性，而不僅僅是切換它。
3. 在這種情況下，“顯示”可能是比“可見性”更好的樣式。 如果你使用“可見性”，那么你只會得到一個空白區域，當它不可見時“層”應該是。
4. 您可能希望傳入 div 標簽的 id 和復選框的 id，而不是“層引用”。

asp.net ajax 中的示例：

這將是您的復選框：

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

這是您要顯示/隱藏的區域：

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

這是您的 function：

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

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