mostrar textbox apenas quando clicar em check box

Enviada por Neto Sales 
Neto Sales
mostrar textbox apenas quando clicar em check box
16 de June de 2018 às 02:38PM
Estou trabalhando num formulário de cadastro onde aparece o número da certidão de nascimento. Como já devem saber, existe o antigo formato de certidões, com nome do cartório, termo, livro e folha (4 campos), e um formato novo de campo único, com 32 dígitos, onde estão implícitas todas essas informações. Coloquei no meu formulário apenas um campo de texto para colocar esses 32 dígitos da nova certidão, e apenas um checkbox chamado certidão antiga, que quando clicado (checado) irá fazer aparecer os quatro campos para preenchimento com os dados das certidões antigas. Pensei em colocar hidden no campo, e através de um if, mudar para text quando checado. Mesmo pra essa idéia simples, não consigo achar a sintaxe. Alguém tem uma solução pra esse problema?
Trambulhao
Re: mostrar textbox apenas quando clicar em check box
17 de June de 2018 às 06:41AM
Exemplo em CSS

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo</title>
<style>
#frm-cn {
margin-top: 20px;
padding: 20px;
background-color: #e4e4e4;
}

#btn_cn_novo:checked ~ #frm-cn form:last-of-type {
display: none;
}

#btn_cn_novo:checked ~ #frm-cn form:first-of-type {
display: block;
}

#btn_cn_velho:checked ~ #frm-cn form:first-of-type {
display: none;
}

#btn_cn_velho:checked ~ #frm-cn form:last-of-type {
display: block;
}
</style>
</head>
<body>
<label for="btn_cn_novo">Número Certidão Nascimento</label>
<input type="radio" name="cn" id="btn_cn_novo" checked>

<label for="btn_cn_velho">Número Certidão Nascimento antigo</label>
<input type="radio" name="cn" id="btn_cn_velho">

<div id="frm-cn">
<form action="" method="post">
Formulário Número Certidão Nascimento
</form>
<form action="" method="post">
Formulário Número Certidão Nascimento antigo
</form>
</div>
</body>
</html>
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.