-1

Alguém consegue me ajudar,

tenho na minha pagina html 3 checkbox, quando seleciono eles carregam via JavaScript o conteúdo em uma DIV.

Quando tiro a seleção do Checkbox eu quero apagar o conteúdo da tela, porem como são 3 checkbox, se eu fizer um if com checked === true e um else com checked === false para cada um, ela vai entrar em mais de uma condição.

Os três checkbox começam sem seleção, eu seleciono um ele não carrega porque ele também entra na condição de falso dos outros checkbox.

como faço para resolver isso ?

10
  • Você pode editar sua postagem e colocar uma foto da tela? Por exemplo, da tela sem a div, e da tela com a div? Fica melhor a visualização, agradeço. Commented 29/09/2020 às 23:22
  • 1
    @Vagner Wentz, fotos (imagens) de telas não são bem vindas aqui na comunidade. O correto seria envia o código como texto.
    – Solkarped
    Commented 29/09/2020 às 23:29
  • 1
    Leia o Manual de como NÃO fazer perguntas
    – Solkarped
    Commented 29/09/2020 às 23:32
  • 1
    @Vagner Wentz, Positivo. O problema de se evitar imagens de código é o fato de não podermos copiar o código e inserir em uma IDE para retifica-lo. Se o código estiver como texto, então podemos sim copia-lo e cola-lo na IDE para realizar as devidas correções, caso precise.
    – Solkarped
    Commented 29/09/2020 às 23:40
  • 1
    @Solkarped Certo, e foi que eu pedi sobre foto da tela, então, vamos parar por aqui, senaõ vai lotar o comentário e não teremos ajudado o nosso amigo. Commented 29/09/2020 às 23:45

1 Resposta 1

1

Você pode criar uma função no javascript que testa qual elemento foi desmarcado.

Exemplo:

function VerificaDesmarcado(elemento){
   
   // Se o check não estiver marcado, removo a DIV
   if(!elemento.checked){
      // Código para remover a DIV
   } else {
      // Código para exibir a DIV   

   }
}

E depois chamar essa função no evento click do checkbox:

<input type="checkbox" onclick="VerificaDesmarcado(this);">

Caso queira testar o código, fiz um esboço bem simples no fiddle: http://jsfiddle.net/t5xpoc9d/

EDIT

Conforme solicitado, farei uma sugestão para remover somente os dados vinculados ao checkbox selecionado.

Como você tem apenas 3 checkboxes, você pode criar um id para cada um deles no html. Assim ficará mais fácil de vincular o checkbox com os dados que serão exibidos.

Exemplo:

<input id="chk1" type="checkbox" onclick="VerificaDesmarcado(this);">

O segundo passo é você colocar os dados de cada um dentro de uma DIV do HTML e deixar essa div com o atributo hidden. Depois é só chamar essa DIV e remover ou adicionar o hidden para esconder ou exibir de acordo com o checkbox.

<div id="dadosChk1" hidden>
   <label>Nome</label>
   <input type="text" value="Nome do usuário"/>

</div>

Depois de ter o id do checkbox você saberá quais dados exibir de acordo com o mesmo. Portanto, o primeiro passo é recuperar o id do checkbox quando o mesmo for clicado:

function VerificaDesmarcado(elemento){
       
       let idCheck = elemento.id;
       
       // Se o check não estiver marcado, removo a DIV
       if(!elemento.checked){
              
          if(idCheck.equals('chk1')){
   
             const divDados = document.querySelector('#dadosChk1');
             divDados.setAttribute('hidden', false);
  
          }

       } else {
          // Código para exibir a DIV   
    
       }
}
4
  • Obrigado pela ajuda, deu quase certo, mas quando eu seleciono um Checkbox ele carrega na tela os dados, seleciono um segundo ele carrega mais dados, porem quando desmarco o Checkbox eu quero remover só os dados daquele Checkbox, mas o que acontece é que ele remove tudo.
    – daniel
    Commented 30/09/2020 às 8:25
  • Daniel, isso você precisa programar dentro do if. Vou editar a respota com uma sugestão, se resolver você poderia marcar a resposta como aceita? Assim que eu terminar de editar te aviso.
    – Jaderson
    Commented 30/09/2020 às 11:37
  • Daniel, editei a resposta com uma nova solução. Se resolver o seu problema, por gentileza poderia marcar como resolvido? Caso não resolva, mas tenha te ajudado de alguma forma, dê um up na resposta. Isso vai aumentar a minha pontuação e permitir que eu consiga ajudar outras pesoas. Abraço
    – Jaderson
    Commented 30/09/2020 às 11:52
  • Grande Jaderson, me ajudou muito, agora deu certo muito obrigado.
    – daniel
    Commented 30/09/2020 às 21:26

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .