Having trouble checking when checkbox is checked-CodePudding

I'm trying to implement a like button into my site for some different pages and I'm using socket io so it updates for every user when the like button is pressed. I have a simple function of like() that emits liked which then makes a counter go up and displays on page. That's not the issue though. I decided to make a checkbox so I can do something when the checkbox is unliked. I have a function for that too that works. I just can't do something when it is unchecked. This is what I'm using to see if the checkbox is checked:

if(document.getElementById('like').checked) {
  like()
}

This does nothing when it is checked though. I even tried to just replace like() with socket.emit('liked') but that didn't work either. What is the proper way of check if the checkbox is checked or not? (Preferably without Jquery)

Html file:

<!DOCTYPE html>
<html>
   <head>
      <title>Test</title>
      <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
   </head>
   <body>
         <p id="likes">Likes: </p>
         <input type="checkbox" id="like"></input>
         <script src="/socket.io/socket.io.js"></script>
         <script>
             var socket = io.connect();
             
      if(document.getElementById('like').checked) {
        like()
      } 

             function like(){
               socket.emit('liked');
             }

       function un_like(){
               socket.emit('unliked');
             }
             
             socket.on('buttonUpdate', function(data){
                 document.getElementById("likes").innerHTML = 'Likes:  '   data;
             });
        </script>
   </body>
</html>

CodePudding user response：

add addEventListener to checkbox

var checkbox = document.querySelector("input[id=like]");

checkbox.addEventListener('change', function() {
  if (this.checked) {
    console.log("Checkbox is checked..");
  } else {
    console.log("Checkbox is not checked..");
  }
});

<input type="checkbox" id="like">Checkbox</input>

CodePudding user response：

Use onChange to handle this. Additional reading

<input type="checkbox" id="like" onChange="clickHandler(this)"></input>

function clickHandler(checkbox) {
   if(checkbox.checked) {
        like()
   } 
}

Sample code:

function clickHandler(checkbox) {
   if(checkbox.checked) {
       console.log('selected')
   } else {
      console.log('unselected')
   }
}

select / unselect: <input type="checkbox" id="like" onChange="clickHandler(this)"></input>