Question

Oculto y muestro un par de divs con un checkbox, si lo marco muestra los divs y si lo desmarco los oculta, en la página de estilos por defecto tengo los divs con visibility: hidden; el problema lo tengo cuando se entra en la página, si el checkbox tiene el checked por defecto, el checkbox aparece marcado, pero el div queda escondido por defecto, según la hoja de estilos. y si a la hoja de estilos le cambio la propiedad a visible y el checkbox esta desmarcado por defecto, pero muestra igualmente los divs, he probado a quitar también de la hoja de estilos esta propiedad, pero continua igual, pongo el código:

jQuery

$(document).ready(function() {  
    function ocultarymostrarfecha()
    {
            if($("input#check").not(':checked')) {                  
            $("div#div1").css({"visibility": "hidden"});
            $("div#div2").css({"visibility": "hidden"});
        }
    }

    ocultarymostrarfecha();

    $("body").on("click", "#check", function() {        
        if($("input#check").is(':checked')) {                   
            $("div#div1").css({"visibility": "visible"});
            $("div#div2").css({"visibility": "visible"});
        }
        else {           
            $("div#div1").css({"visibility": "hidden"});
            $("div#div2").css({"visibility": "hidden"});
        }
    });
});

HTML

<div id="cierto">¿Es cierto?
<?php
    if($cierto == 1) {              
        $chequeo = "checked";
    }           

    echo "<input type='checkbox' id='check' name='check' value='1'".$chequeo.">";
?> 
</div>

<div id="div1">
Muestro algo
</div>

<div id="div2">
Muestro otra cosa
</div>

Comments

Por favor agrega tu HTML a la pregunta para revisar en donde puede estar el error.

Saludos.

---

Ya he añadido el HTML

Answer 1

Hola @bichomen,

lo que tenés que hacer es coordinar el checked con el estado visible o no del DIV al momento de cargar la página.

Por ejemplo:

<div id="cierto">¿Es cierto?
<?php
    $visible = "visible";
    if($cierto == 1) {              
        $chequeo = "checked";
        $visible = "hidden";
    }           

    echo "<input type='checkbox' id='check' name='check' value='1'".$chequeo.">";
?> 
</div>

<div id="div1" style="visibility:<?=$visible?>">
Muestro algo
</div>

<div id="div2" style="visibility:<?=$visible?>">
Muestro otra cosa
</div>

Luego, el comportamiento del checked se puede cambiar a un simple switch, pero esto ya es cuestión de gustos:

$("body").on("click", "#check", function() {        
  // Conmuta DIV1
  if($("div#div1").css("visibility")=="visible");
    $("div#div1").css({"visibility": "hidden"});
  } else {
    $("div#div1").css({"visibility": "visible"});
  }
  // Conmuta DIV2
  if($("div#div2").css("visibility")=="visible");
    $("div#div2").css({"visibility": "hidden"});
  } else {
    $("div#div2").css({"visibility": "visible"});
  }
});

Por último, lo que dice @Alex_Numpaque sobre usar display en vez de visibility es relevante: se comportan igual, pero cuando se usa visibility el elemento sigue ocupando el espacio aunque no se vea, en cambio display hace que además de no verse el elemento desaparezca del flujo de visualización.
Se usa display en general para no craer huecos en la página.

Saludos cordiales!

Answer 2

Para ocultar un div o un objeto
$("#div1").css("display","none");
Para mostrar un objeto
$("#div1").css("display","block");