Umschalten div Sichtbarkeit mit einer Checkbox-Liste

Question

Ich habe eine Web-Anwendung (ASP.NET2.0 C #). In ihm habe ich einen div, die eine Checkbox-Liste und eine Schaltfläche enthält.

Ich möchte die div Ansicht wechseln, so dass ich einige Online-JavaScript-Code, mir zu helfen.

Heres den Code:

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

ich rufe die Funktion auf diese Weise:

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

Wenn ich diese Funktion verwenden, es zeigt mir die div mit der Taste, aber es zeigt mir nicht die Checkboxlist .... Irgendwelche Ideen auf, was los ist?

Danke.

Answer 1

Haben Sie versucht, statt visiblity mit Display?

Zum Beispiel statt:

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

Verwendung:

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

Sie müssen alle Ihre Verweise auf visiblity mit Display ersetzen nicht nur die getElementById Version. Sie können auch jQuery aussehen wollen, die Ihr Szenario, mit ein paar Zeilen Code behandelt Plus keine Notwendigkeit für ein Onclick-Attribut Sie hTML-Wolke.

<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

Einige Vorschläge:

1. Sie wirklich in Betracht ziehen sollten eine Javascript-Bibliothek wie ASP.NET AJAX oder JQuery . Dies wird helfen, den Browser-spezifischen Code aus dem Weg zu bekommen.
2. Basis der Sichtbarkeit auf dem Stand der Checkbox, anstatt Makel es einfach.
3. „Anzeige“ ist wahrscheinlich eine bessere Art in dieser Situation statt „Sichtbarkeit“. Wenn Sie „Sichtbarkeit“ verwenden, dann werden Sie nur einen leeren Bereich, wo die „Schicht“ sein sollte, wenn es unsichtbar ist.
4. Anstelle einer „Referenzschicht“ möchten Sie wahrscheinlich in die ID des div-Tags und die ID der Checkbox zu übergeben.

Beispiel in asp.net Ajax:

Hier wäre Ihre Checkbox:

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

Hier ist der Bereich, den Sie zum Anzeigen / Verbergen wollen:

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

Hier ist Ihre Funktion:

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

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