Estoy tratando de registrar la propiedad checked de un elemento de radio en el evento de click . Pero devuelve el valor incorrecto.
const radio = document.querySelector('input[type=radio]') radio.addEventListener('click', (ev) => { ev.preventDefault(); console.log(ev.target.checked); }) <p class="rInput"> <input type="radio" name="R" id="ID"> <label for="ID">The label</label> </p> Al hacer clic en la radio, debe registrar el estado verificado, pero siempre registra true .
Mi solución a esto fue agregar un timeOut de 0 milisegundos, y funcionó
const radio = document.querySelector('input[type=radio]') radio.addEventListener('click', (ev) => { ev.preventDefault(); setTimeout(() => { console.log(ev.target.checked); }, 0); }) <p class="rInput"> <input type="radio" id="ID"> <label for="ID">The label</label> </p>Pero , ¿cuál es el problema y por qué sucede esto? ¿Hay una solución mejor?
Ok, esta es una pregunta un poco extraña. Déjame tratar de explicar por qué lo llamo una pregunta extraña :
console.log(rI.checked); por lo tanto, siempre registrará TRUE .Espero que tenga sentido. Como seguimiento, creo que deberías VERIFICAR (juego de palabras) cómo hacer que un botón no esté marcado. Esta es una excelente respuesta sobre cómo hacerlo usando JS sin marcos.
Fragmento de código ACTUALIZADO:
$(document).ready(function(){ $('input[type="radio"]').click(function(){ if($(this).prop("checked") === true){ console.log("Checkbox is checked."); } else if($(this).prop("checked") === false){ console.log("Checkbox is unchecked."); } }); });Sería más sencillo deshabilitar el botón de opción en el que no desea que se haga clic.
const radios = document.querySelectorAll('input[type="radio"]'); radios.forEach(radio => radio.addEventListener('click', handleClick, false)); function handleClick(e) { const { id, checked } = e.target; console.log(id, checked); }; <div> <label for="1">First <input name="radio" id="1" type="radio"> </label> <label for="2">Second (disabled) <input name="radio" id="2" type="radio" disabled> </label> <label for="3">Last <input name="radio" id="3" type="radio"> </label> </div>