alternare div visibilità con una lista di checkbox

Question

Ho un'applicazione web (ASP.NET2.0 C #). All'interno di esso, ho un div che contiene un elenco casella di controllo e un pulsante.

Voglio attivare o disattivare la visualizzazione div, così ho avuto un po 'di codice javascript online per aiutare me.

Ecco il codice:

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

chiamo la funzione in questo modo:

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

Quando uso questa funzione, mi mostra il div con il pulsante, ma non mi mostra il CheckBoxList .... Tutte le idee su quello che sta succedendo?

Grazie.

Answer 1

Hai provato a usare display al posto del visiblity?

Per esempio, invece di:

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

Usa:

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

Si dovrà sostituire tutti i riferimenti a visiblity con non mostra solo la versione getElementById. Si consiglia inoltre di considerare di usare jQuery che gestirà lo scenario con poche righe di codice, oltre a c'è bisogno di un onclick attributo al cloud si 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

Alcuni suggerimenti:

1. È davvero dovrebbe considerare l'utilizzo di una libreria JavaScript come ASP.NET AJAX o JQuery . Ciò contribuirà ad ottenere il codice specifico del browser fuori strada.
2. Base la visibilità sullo stato della casella di controllo, piuttosto che solo la commutazione di esso.
3. "Display" è probabilmente uno stile di meglio in questa situazione invece di "visibilità". Se si utilizza "visibilità" allora si avrà solo ottenere un'area vuota in cui lo "strato" dovrebbe essere quando è invisibile.
4. Al posto di un "riferimento layer" probabilmente si desidera passare l'id del tag div e l'id della casella di controllo.

Esempio in asp.net ajax:

Qui sarebbe la tua casella di controllo:

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

Questa è la zona che si desidera mostrare / nascondere:

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

Ecco la funzione:

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

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