확인란 목록을 사용하여 div 표시 여부 전환

Question

웹 응용 프로그램 (ASP.NET2.0 C#)이 있습니다. 그 안에 체크 박스 목록과 버튼이 들어있는 div가 있습니다.

나는 div보기를 토글하고 싶다. 그래서 나는 나를 돕기 위해 몇몇 자바 스크립트 코드를 가지고있다.

을 Heres 코드 :이 기능을 사용하면

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

, 그것은 나에게 버튼 사업부를 보여 주지만,이 표시되지 않습니다 : 나는 기능이 방법을 전화

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

나에게 체크 박스 목록 .... 무슨 일이 일어나고 있는지에 대한 아이디어?

감사합니다.

Answer 1

visiblity 대신 디스플레이를 사용해 보셨습니까?

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 버전 디스플레이 가시성에 대한 모든 참조를 교체해야합니다. 또한 몇 줄의 코드로 시나리오를 처리하고, html을 클라우드로 보낼 때 onclick 속성을 사용할 필요가없는 jQuery을 사용할 수도 있습니다.

<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 같은 자바 스크립트 라이브러리를 사용하는 것이 좋습니다. 이렇게하면 브라우저의 특정 코드를 방해 할 수 있습니다.
2. 체크 박스를 토글하는 것보다는 체크 박스의 상태를 확인하십시오.
3. "표시"대신 "표시"가 더 나은 스타일 일 수 있습니다. "가시성"을 사용하면 보이지 않을 때 "레이어"가 있어야하는 빈 영역이 생깁니다.
4. "레이어 참조"대신 div 태그의 ID와 확인란의 ID를 전달하려고합니다. asp.net 아약스에서

예 :

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

:

여기

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

당신이 숨기기/표시 할 영역은 다음과 같습니다

은 체크 박스 것 귀하의 기능은 다음과 같습니다 :

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

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