Блог

Главная - Вопросы по программированию - Возникли проблемы с проверкой, когда флажок установлен

Возникли проблемы с проверкой, когда флажок установлен

#javascript #html #node.js #checkbox #socket.io

Вопрос:

Я пытаюсь внедрить кнопку «Нравится» на свой сайт для нескольких разных страниц, и я использую socket io, чтобы он обновлялся для каждого пользователя при нажатии кнопки «Нравится». У меня есть простая функция like() , которая выдает liked , которая затем увеличивает счетчик и отображается на странице. Однако проблема не в этом. Я решил сделать флажок, чтобы я мог что-то сделать, когда флажок не установлен. Для этого у меня тоже есть функция, которая работает. Я просто не могу что-то сделать, когда он снят. Это то, что я использую, чтобы проверить, установлен ли флажок:

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

Это ничего не делает, когда он установлен. Я даже пытался просто заменить like() на socket.emit('liked') , но это тоже не сработало. Как правильно проверить, установлен ли флажок или нет? (Желательно без Jquery)

Html-файл:

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

Комментарии:

1. можете ли вы добавить немного HTML-кода?

Ответ №1:

добавить addEventListener в флажок

 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>

Ответ №2:

Используйте onChange для обработки этого. Дополнительное чтение

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

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

Пример кода:

 function clickHandler(checkbox) {
   if(checkbox.checked) {
       console.log('selected')
   } else {
      console.log('unselected')
   }
} 
 select / unselect: <input type="checkbox" id="like" onChange="clickHandler(this)"></input>
Метки: ,