原生JS检测checkbox勾选状态失效，socket.io点赞功能无法触发

核心问题 #

你编写的checked状态判断代码仅会在页面加载完成时执行一次，此时checkbox默认处于未勾选状态，自然不会触发任何逻辑。要实现点击checkbox时触发对应操作，需要为checkbox绑定change事件监听器，每次状态变更时主动检测勾选状态执行对应逻辑。

正确实现代码 #

将你原有script标签内的逻辑替换为以下代码即可：

var socket = io.connect();
// 获取checkbox元素
const likeCheckbox = document.getElementById('like')
// 绑定状态变更事件监听
likeCheckbox.addEventListener('change', function() {
  // 每次点击checkbox都会触发该回调，实时检测状态
  if (this.checked) {
    like()
  } else {
    un_like()
  }
})

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

function un_like(){
  socket.emit('unliked');
}

socket.on('buttonUpdate', function(data){
  document.getElementById("likes").innerHTML = 'Likes:  ' + data;
});

补充说明 #

• 原生JavaScript检测checkbox是否勾选的标准方式就是读取DOM元素的checked属性，返回布尔值true代表已勾选，false代表未勾选，你之前的判断逻辑本身没有问题，只是执行时机错误。
• input是单标签元素，不需要额外加闭合标签</input>，直接写<input type="checkbox" id="like">即可。

内容的提问来源于stack exchange，提问作者Kr4ziDev