Zaloguj | Zarejestruj | FAQ
Anonymous

Como esconder div ao selecionar checkbox?

+ Odpowiedz

Posty: 5 Strona 1 z 1


Como esconder div ao selecionar checkbox?

przez synsynho » So lis 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 użytkownika

synsynho

  • Posty: 3
  • Dołączył(a): So lis 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

przez XainPro » Pn lis 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 użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

przez synsynho » Śr lis 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 użytkownika

synsynho

  • Posty: 3
  • Dołączył(a): So lis 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

przez XainPro » Cz lis 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 użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

przez d4v1 » Cz lut 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 użytkownika

d4v1

  • Posty: 1
  • Dołączył(a): Cz lut 23, 2017 12:45 am


+ Odpowiedz

Strona 1 z 1