Javascript checkbox, how to delete screen content when unchecking Checkbox

Asked

Viewed 83 times

-1

Someone can help me,

I have in my html page 3 checkbox, when I select they load via Javascript the content in a DIV.

When I take the Checkbox selection I want to delete the contents of the screen, however as are 3 checkbox, if I make a if checked === true and a Else with checked === false for each, she will enter into more than one condition.

The three checkbox starts without selection, I select one it does not load because it also enters the false condition of the other checkbox.

how do I solve this ?

javascript

  • Can you edit your post and put a picture of the screen? For example, the screen without the div, and the screen with the div? Gets better the view, thank you.

  • 1

    @Vagner Wentz, pictures (images) of screens are not welcome here in the community. The correct would be send the code as texto.

  • @Solkarped Thank you for your attention, I didn’t know that.

  • 1

    Read the Manual on how NOT to ask questions

  • @Solkarped Thanks, I read, and showed that can not put photo code, but images can yes. And I asked for a picture of the screen to better understand, and I forgot to ask for the code Portanto, não poste código como imagem! Nunca! Jamais! Imagens devem ser usadas apenas para coisas tais como figuras, desenhos, diagramas, prints de tela, etc.

  • 1

    @Vagner Wentz, Positive. The problem of avoiding imagens code is the fact that we cannot copy the code and insert it into an IDE to rectify it. If the code is like texto, then we can copy it and glue it to the IDE to make the appropriate corrections if you need to.

  • 1

    @Right solkarped, and it was that I asked on screen photo, so let’s stop here, or will fill the comment and we will not have helped our friend.

  • Talk personal, thanks for the help, so the code got a little big, have to post whole or just put the part I’m having trouble with.

  • 777- for a good practice I advise you to use the select or radio

  • @daniel in the future when you have a doubt and the code is extensive try to make a [MCVE] that is just a dry code that replicates the same condition that triggers error generated in the main application.

Show 5 more comments

1 answer

1


You can create a function in javascript that tests which element was unchecked.

Example:

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   

   }
}

And then call this function in the checkbox click event:

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

If you want to test the code, I made a very simple sketch on the fiddle: http://jsfiddle.net/t5xpoc9d/

EDIT

As requested, I will make a suggestion to remove only data linked to the selected checkbox.

Since you only have 3 checkboxes, you can create an id for each of them in html. This will make it easier to link the checkbox with the data that will be displayed.

Example:

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

The second step is to put each person’s data inside an HTML DIV and leave that div with the Hidden attribute. Then just call this DIV and remove or add the Hidden to hide or display according to the checkbox.

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

</div>

Once you have the checkbox id you will know which data to display according to it. Therefore, the first step is to recover the checkbox id when it is clicked:

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   
    
       }
}

  • Thanks for the help, it almost worked, but when I select a Checkbox it loads the data on the screen, select a second it loads more data, but when I uncheck the Checkbox I want to remove only the data from that Checkbox, but what happens is that it removes everything.

  • Daniel, this you need to program inside the if. I will edit the answer with a hint, if you solve you could mark the answer as accepted? As soon as I’m done editing I’ll let you know.

  • Daniel, I edited the answer with a new solution. If you solve your problem, would you kindly mark as solved? In case you don’t solve it, but it has helped you in some way, give an up on the answer. This will increase my score and allow me to help other people. Hug

  • Great Jaderson, helped me so much, now it worked out thank you so much.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.