Login | Register | FAQ
Anonymous

Como esconder div ao selecionar checkbox?

+ Post a reply

5 posts Page 1 of 1


Como esconder div ao selecionar checkbox?

by synsynho » Sat 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.
User avatar

synsynho

  • Posts: 3
  • Joined: Sat Nov 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

by XainPro » Mon 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>
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

by synsynho » Wed 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?
User avatar

synsynho

  • Posts: 3
  • Joined: Sat Nov 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

by XainPro » Thu 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>
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

by d4v1 » Thu Feb 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.
User avatar

d4v1

  • Posts: 1
  • Joined: Thu Feb 23, 2017 12:45 am


+ Post a reply

Page 1 of 1