체크 박스 목록으로 DIV 가시성을 전환합니다

Question

웹 응용 프로그램이 있습니다 (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를 표시하지만 CheckBoxList를 표시하지 않습니다 .... 무슨 일이 일어나고 있는지에 대한 아이디어가 있습니까?

고맙습니다.

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

Visiblity에 대한 모든 참조를 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. JavaScript 라이브러리와 같은 사용을 고려해야합니다 asp.net ajax 또는 jQuery. 이렇게하면 브라우저 특정 코드를 제거하는 데 도움이됩니다.
2. 체크 박스 상태에 대한 가시성을 기본적으로 토글하지 않고 확인합니다.
3. "디스플레이"는 아마도 "가시성"대신이 상황에서 더 나은 스타일 일 것입니다. "가시성"을 사용하는 경우 "레이어"가 보이지 않을 때 "레이어"가 있어야하는 빈 영역을 얻게됩니다.
4. "레이어 참조"대신 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>