チェックボックスリストでの表示の切り替え

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> 

私はこの方法で関数を呼び出す：私はこの機能を使用する場合

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

、それは私にボタン付きのdivを示しているが、それは表示されません。私はチェックボックスのリスト....何が起こっているかについてのアイデア？

ありがとうございます。

Answer 1

visiblityではなくdisplayを使ってみましたか？例えば

、代わりに：

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

あなたは、ディスプレイだけでなく、getElementByIdをバージョンと可視性にすべての参照を交換する必要があります。また、あなたのシナリオを数行のコードで処理するjQueryを使用して調べることもできます。また、HTMLをクラウド化するonclick属性は必要ありません。

<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. あなたは本当にASP.NET AJAXまたはJQueryのようなJavaScriptライブラリを使用して検討すべきです。これは、ブラウザの特定のコードを途中で取り除くのに役立ちます。
2. チェックボックスの状態を、単に切り替えるのではなく、その状態に基づいて設定します。
3. このような状況では、「表示」ではなく「表示」が適しています。 「可視性」を使用すると、「レイヤー」が見えないときに空白の領域が表示されます。
4. "レイヤー参照"の代わりに、おそらくdivタグのIDとチェックボックスのIDを渡したいと思うでしょう。 asp.netのアヤックスで

例：ここでは

はあなたのチェックボックスのようになります。ここでは

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