Estoy tratando de implementar un botón Me gusta en mi sitio para algunas páginas diferentes y estoy usando socket io para que se actualice para cada usuario cuando se presiona el botón Me gusta. Tengo una función simple de me like() que emite Me liked , lo que luego hace que un contador suba y se muestre en la página. Aunque ese no es el problema. Decidí hacer una casilla de verificación para poder hacer algo cuando la casilla de verificación no es deseada. Tengo una función para eso también que funciona. Simplemente no puedo hacer algo cuando no está marcado. Esto es lo que estoy usando para ver si la casilla de verificación está marcada:
if(document.getElementById('like').checked) { like() } Sin embargo, esto no hace nada cuando se comprueba. Incluso traté de reemplazar like() con socket.emit('liked') pero tampoco funcionó. ¿Cuál es la forma correcta de verificar si la casilla de verificación está marcada o no? (Preferiblemente sin Jquery)
archivo 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>agregue addEventListener a la casilla de verificación
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>Use onChange para manejar esto. Lectura adicional
<input type="checkbox" id="like" onChange="clickHandler(this)"></input> function clickHandler(checkbox) { if(checkbox.checked) { like() } }Código de muestra:
function clickHandler(checkbox) { if(checkbox.checked) { console.log('selected') } else { console.log('unselected') } } select / unselect: <input type="checkbox" id="like" onChange="clickHandler(this)"></input>