登录 | 注册 | FAQ
Anonymous

Como esconder div ao selecionar checkbox?

+ 发表回复

5 篇帖子 分页: 1 / 1


Como esconder div ao selecionar checkbox?

synsynho » 周六 11月 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.
头像

synsynho

  • 帖子: 3
  • 注册: 周六 11月 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

XainPro » 周一 11月 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>
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

synsynho » 周三 11月 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?
头像

synsynho

  • 帖子: 3
  • 注册: 周六 11月 09, 2013 12:01 pm

Re: Como esconder div ao selecionar checkbox?

XainPro » 周四 11月 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>
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Como esconder div ao selecionar checkbox?

d4v1 » 周四 2月 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.
头像

d4v1

  • 帖子: 1
  • 注册: 周四 2月 23, 2017 12:45 am


+ 发表回复

分页: 1 / 1