Entrar | Registrar | FAQ
Anonymous

Como esconder div ao selecionar checkbox?

+ Postar uma resposta

5 Mensagens Página 1 de 1


Como esconder div ao selecionar checkbox?

por synsynho » Sáb Nov 09, 2013 12:12 pm

Olá!

Estou criando um sistema de testa em html, sou iniciante e queria tirar uma dúvida:

Vamos supor que o "[]" é o checkbox e o quadrado grande seja o textarea. Preciso que ocorra o seguinte processo:

Quando o checkbox estiver desmarcado, deve aparecer o campo textarea:

[] Funcionando.
_________________________
|Erro Erro Erro Erro Erro Erro E.|
|Erro Erro Erro Erro Erro Erro E.|
|Erro Erro Erro Erro Erro Erro E.|
|_________________________|

Quando o checkbox estiver desmarcado não deve aparecer o campo textarea:

[x] Funcionando.

Até agora só consegui fazer o contrário: Quando o checkbox está marcado, aparece o textarea, quando ele está desmarcado, o textarea desaparece, porém, não é pra acontecer isso, pois quando marcar a opção "Funcionando" não será necessário informar o erro que está ocorrendo no sistema da empresa. E quando nao estiver marcado, o erro deve ser relatado logo abaixo.

Bom, é isso, agradeço se conseguirem ajudar.
Avatar de usuário

synsynho

  • Mensagens: 3
  • Data de registro: Sáb Nov 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

por XainPro » Seg Nov 11, 2013 6:20 pm

<html>
<head>
<title>
Document
</title>
<script>
function redi() {
if(!document.getElementById("checkbox").checked)
{
document.getElementById("textArea").innerHTML ='';
document.getElementById("textArea").innerHTML ='<textarea id="wmd-input" rows="15" cols="92" name="post-text"></textarea>';
}
else {
document.getElementById("textArea").innerHTML ='';
}
}
</script>
</head>
<body>
<p>
<label for="name">checkbox:</label>
<input for="name" id="checkbox" onclick="redi()" type="checkbox">
</p>
<p id="textArea">
<textarea id="wmd-input" rows="15" cols="92" name="post-text"></textarea>
</p>
</body>
</html>
Avatar de usuário

XainPro

  • Mensagens: 3933
  • Data de registro: Sex Fev 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

por synsynho » Qua Nov 13, 2013 7:28 pm

XainPro, eu tentei isso que você me mandou e funcionou corretamente, porém, só funciona no primeiro item, preciso fazer a mesma coisa com uns 20 itens, ou seja, uns 20 checkbox que ao selecionar cada um, esconda a textarea correspondente, tem como você me ajudar com isso?
Avatar de usuário

synsynho

  • Mensagens: 3
  • Data de registro: Sáb Nov 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

por XainPro » Qui Nov 14, 2013 12:54 pm

<html>
<head>
<title>
Document
</title>
<script>
function redi(theID) {
if(!document.getElementById("checkbox" + theID + "").checked)
{
document.getElementById(theID).innerHTML ='';
document.getElementById(theID).innerHTML ='<textarea rows="15" cols="92" name="'+ theID +'"></textarea>';
}
else {
document.getElementById(theID).innerHTML ='';
}
}
</script>
</head>
<body>
<p>
<label for="name">checkbox 1:</label>
<input for="name" id="checkboxtxt1" onclick="redi('txt1')" type="checkbox">
</p>
<p id="txt1">
<textarea rows="15" cols="92" name="txt1"></textarea>
</p>

<p>
<label for="name">checkbox 2:</label>
<input for="name" id="checkboxtxt2" onclick="redi('txt2')" type="checkbox">
</p>
<p id="txt2">
<textarea rows="15" cols="92" name="txt2"></textarea>
</p>

<p>
<label for="name">checkbox 3:</label>
<input for="name" id="checkboxtxt3" onclick="redi('txt3')" type="checkbox">
</p>
<p id="txt3">
<textarea rows="15" cols="92" name="txt3"></textarea>
</p>

<p>
<label for="name">checkbox 4:</label>
<input for="name" id="checkboxtxt4" onclick="redi('txt4')" type="checkbox">
</p>
<p id="txt4">
<textarea rows="15" cols="92" name="txt4"></textarea>
</p>

<p>
<label for="name">checkbox 5:</label>
<input for="name" id="checkboxtxt5" onclick="redi('txt5')" type="checkbox">
</p>
<p id="txt5">
<textarea rows="15" cols="92" name="txt5"></textarea>
</p>
</body>
</html>
Avatar de usuário

XainPro

  • Mensagens: 3933
  • Data de registro: Sex Fev 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

por d4v1 » Qui Fev 23, 2017 1:06 am

isso e perfeito, quase exatamente o que eu preciso, tentei usar da maneira que eu quero, mas ao clicar em um, mostra todos. me ajuda por favor??
preciso desse modelo ai, ao contrario.
preciso que as caixa de texto fique escondida mostrando apenas as "checkbox", e ao "tickar" aparecer apenas a box "tickada" e ao "tickar" outra box, ocultar e mostrar a nova que for "tickada".
no lugar dessa caixa de texto, irei colocar uma tag form. funciona também né?!
desde já obrigado.
Avatar de usuário

d4v1

  • Mensagens: 1
  • Data de registro: Qui Fev 23, 2017 12:45 am


+ Postar uma resposta

Página 1 de 1