Having trouble checking when checkbox is checked

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>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating