Para ocultar elementos em uma página usamos os atributos visibility:hidden ou display:none .
• visibility:hidden - oculta um elemento mantendo o espaço que ele ocupava
• display:none - oculta um elemento sem manter o espaço que ele ocupava
HTML:
Ocultar com visibility:hidden: <input type="checkbox" id="chk2" onclick="ocultarVisibilty()">
<label for="teste2" id="label_teste2"> Teste:</label>
<input type="text" name="teste" id="teste2">
Ocultar com display:none: <input type="checkbox" id="chk1" onclick="ocultarDisplay()">
<label for="teste1" id="label_teste1"> Teste:</label>
<input type="text" name="teste1" id="teste1">
Javascript:
function ocultarVisibilty() {
if(document.getElementById("chk2").checked) {
document.getElementById("label_teste2").style.visibility = "hidden";
document.getElementById("teste2").style.visibility = "hidden";
} else {
document.getElementById("label_teste2").style.visibility = "";
document.getElementById("teste2").style.visibility = "";
}
}
function ocultarDisplay() {
if(document.getElementById("chk1").checked) {
document.getElementById("label_teste1").style.display = "none";
document.getElementById("teste1").style.display = "none";
} else {
document.getElementById("label_teste1").style.display = "";
document.getElementById("teste1").style.display = "";
}
}