Mostrar combo al desactivar checkbox

[sjj]

Hola. Estoy intentando hacer un formulario el cual cuenta con un checkbox que viene activado por defecto. En caso de que el usuario lo desactive debe desplegarse un menú select. Lo he armado y funciona bastante bien, el tema de mostrar ocultar pero tiene un solo problema. Al cargar la página inicialmente el checkbox viene activado y el combo también se muestra. Una vez que uno lo desactiva una vez ya comienza a funcionar correctamente y lo muestra solo en caso de que esté activado. Yo necesito que al iniciar la página el campo venga activado, como hasta ahora, pero que no muestre el select. Este es el código que tengo:

Código HTML:

<script>
function deshabilita()
{
    if(document.getElementById('devolucion').checked)
    {
        document.getElementById('zonadev').hidden=true;
    }
    else
    {
        document.getElementById('zonadev').hidden=false;
    }
}
</script>
<form action="graba.php" method="post" name="form1" id="form1">
	
     </p>
      <p class="Estilo42">Zona
        <select name="zona" onchange="slctryole(this,this.form.select2)">
            <option></option>
            <option value="Chaco">Chaco</option>
            <option value="Chubut">Chubut</option>
            <option value="Cordoba">C&oacute;rdoba</option>
            <option value="Corrientes">Corrientes</option>
          </select>
          <select name="zona2" onchange="slctryole(this,this.form.select3)">
            <option></option>
          </select>
      </p>
      <p class="Estilo43"><input name="devolucion" type="checkbox" id="devolucion" onclick="deshabilita()" checked="checked">

Devolver el auto en el mismo lugar <br/>
<select name="zonadev" id="zonadev">             
             <option value="Chaco">Chaco</option>
            <option value="Chubut">Chubut</option>
            <option value="Cordoba">C&oacute;rdoba</option>
            <option value="Corrientes">Corrientes</option></select>
</form> 

¿Alguien ve qué estoy haciendo mal? Muchas gracias.

[IsaBelM]

primero esto

.hidden=true;

o es muy antiguo o muy nuevo. nunca lo he visto. aunque me suena mas a ocultar un control en un mac
usa

style.display = 'none o block'

para el el control esté oculto de inicio, ocultalo con css

[sjj]

Debe ser algo muy viejo. Lo hice a puro ensayo y error. ¿Con CSS es mejor? ¿Así sería?

Código HTML:

<style type="text/css">
.Ocultar{
	style: none;
	font-size: 9px;
}
</style>
------------------------
<p class="Estilo43"><input name="devolucion" type="checkbox" id="devolucion" onclick="deshabilita()" checked="checked">

Devolver el auto en el mismo lugar <br/>
<p class="Ocultar"><select name="zonadev" id="zonadev">             
   <option value="Formosa">Formosa</option>
   <option value="Jujuy">Jujuy</option>
   <option value="SanLuis">San Luis</option>
   <option value="Neuquen">Neuquén</option>

</select> 

Muchas gracias por tu ayuda =)

[IsaBelM]

la propiedad style no existe es display

[sjj]

Gracias, pero me parece que no me estoy explicando con lo que quiero hacer. Con el style: none no aparece en el inicio pero tampoco aparece cuando destildo la opción, no aparece nunca porque el CSS lo oculta. Del otro modo al tildar o destildar sí funcionaba. ¿Hay algún modo de lograr eso con CSS o sin ellos?

[FerraN10]

no se si es lo que preguntas pero haz esto

div1.style.display="none";

Cuando quieras ocultar

y cuando quieras mostrar a ver si con esto te sirve

div1.style.display="";

[sjj]

Voy otra vez. La página está hecha en PHP por lo que se me complica andar modificando los CSS según cada instancia. Si en el código viene el campo desactivado por default todo funciona perfectamente. Es solo cuando viene activado que comete el error y muestra lo que no debería. Acá encontré un claro ejemplo de lo que quiero hacer: http://www.rentalcars.com/

El checkbox viene tildado, y cuando se destilda se muestran campos adicionales. Si se vuelve a tildar desaparecen esos campos. ¿El único modo de hacerlo es con CSS? Si es así creo estaré complicado para mezclarlo con PHP.

Gracias a los dos =)

[IsaBelM]

si no quieres modificar el css, haz esto

function deshabilita(estado)
{
if(estado == true)
{
document.getElementById('zonadev').style.display = 'none';
}
else
{
document.getElementById('zonadev').style.display = 'block';
}
}


window.onload = function() {deshabilita(true);};


<input name="devolucion" type="checkbox" id="devolucion" onclick="deshabilita(this.checked)" checked="checked">

[sjj]

¡Eso era nomás! Muchas gracias por tus ayudas Isabel, y disculpá si no me hice entender muy bien.