1

Tengo estos siguientes códigos:

function imprimirPregunta()
{   
    $(".panel-answers").empty();
    $(".p-question").html((cont + 1) + ".- " + preguntas[cont]["pregunta"]);
    
    for(var i = 1; i <= 4; i++)
    {
        var respuesta = preguntas[cont]["respuesta" + i] == preguntas[cont]["correcto"] ? "correcto" : "incorrecto";
        
        var panel = $("<div class='panel-answer'><p>" + preguntas[cont]["respuesta" + i] + "</p>"
                       + "<input type='radio' name='ranswer' value='" + respuesta + "'></div>");
        
        $(".panel-answers").append(panel);
    }
    
    $(".panel-answer").on("click", function(){
        $("input[name=ranswer]").removeAttr("checked");
        $(this).children("input[name=ranswer]").attr("checked", "checked");
        $(".panel-answer").removeClass("seleccionar");
        $(this).addClass("seleccionar");
    }); 
}

function verificar()
{
    $("input[name=ranswer]").each(function(){
        if($(this).is(":checked"))
        {
            alert($(this).val());
            return false;
        }
    });
}

En el evento click de .panel-answer tengo esta línea de código:

$("input[name=ranswer]").removeAttr("checked");

Y esto porque cuando se selecciona un input radio no se eliminan los checked de los demas radios y tengo entendido que esto debe hacerlo automáticamente porque todos los radios tienen el mismo valor en el name, porque no lo esta haciendo?? No tengo ni idea.

Y el problema viene que la compu sigue haciendo lo que quiere, porque cuando ejecuto la función verificar no detecta el atributo checked en ningun radio y se se fijan después de eliminar todos los checked, agrego el atributo checked a un elemento radio en especifico.

Si quito esa línea si detecta el atributo checked pero si la pongo no. Por que esta haciendo eso??

1 respuesta 1

1

En el código mostrado en la pregunta no hay errores. Tal vez están en otro lado y tratas de solucionarlo manipulando directamente el atributo checked, pero casi tengo la certeza de que, en vez de ayudar, va a complicar más tu trabajo.

Para este ejemplo solo hice cambios:

  1. Crear variables para poder ejecutar
  2. Agregando un botón de verificación y asignar evento clic
  3. Verificar que se haya marcado una opción y mostrar el valor
  4. Agregué un botón para desmarcar la opción seleccionada y volver a comenzar

// Crear variables para probar
let preguntas = [
    {
        pregunta: '¿Cuál es la respuesta?',
        respuesta1: 'Uno',
        respuesta2: 'Dos',
        respuesta3: 'Tres',
        respuesta4: 'Cuatro',
        correcto: 'Tres'
    },
    {
        pregunta: '¿Cuál es la segunda respuesta?',
        respuesta1: 'Cinco',
        respuesta2: 'Seis',
        respuesta3: 'Siete',
        respuesta4: 'Ocho',
        correcto: 'Seis'
    }
];
let cont = 0;

function imprimirPregunta()
{   
    $(".panel-answers").empty();
    $(".p-question").html((cont + 1) + ".- " + preguntas[cont]["pregunta"]);
    
    for(var i = 1; i <= 4; i++)
    {
        var respuesta = preguntas[cont]["respuesta" + i] == preguntas[cont]["correcto"] ? "correcto" : "incorrecto";
        
        var panel = $("<div class='panel-answer'><p>" + preguntas[cont]["respuesta" + i] + "</p>"
                       + "<input type='radio' name='ranswer' value='" + respuesta + "'></div>");
        
        $(".panel-answers").append(panel);
    }
}

$('#verifica').on('click', e => {
    // ¿Se seleccionó una opción?
    if($("input[name=ranswer]:checked").length == 1) {
        // Mostrar valor de elemento marcado
        console.log('Se seleccionó: ' + $("input[name=ranswer]:checked").val());
        // Incrementar contador
        cont ++;
        // Avanzar solo si es posible
        if(cont < preguntas.length) {
            imprimirPregunta();
        } else {
            // No hay más preguntas
            $('#verifica').attr('disabled', true);
        }
    } else {
        console.log('Por favor selecciona una respuesta');
    }
});

// En caso de querer desmarcar, puedes usar esta función
$('#limpia').on('click', e => {
    if($("input[name=ranswer]:checked").length == 1) {
        // [0] hace referencia al elemento HTML en vez del objeto jQuery
        $("input[name=ranswer]:checked")[0].checked = false;
    }
});

// Mostrar pregunta al cargar página
imprimirPregunta();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-question"></div>
<div class="panel-answers"></div>
<button type="button" id="verifica">Verificar</button>
<button type="button" id="limpia">Limpiar</button>

Por otra parte, no es conveniente que marques la respuesta correcta, porque se puede ver fácilmente en el código fuente o inspector de la página. Deberías poner el valor correspondiente a cada respuesta y hacer las validaciones correspondientes en el servidor, nunca directamente en el navegador.

7
  • 1
    Que rapido, apenas iba a crear una respuesta xd, en fin, algo mas que añadir seria comentarle al OP el hecho de que en un input radio no puedes desmarcar una opcion una vez seleccionada, lo maximo que puedes hacer es seleccionar algun otro boton, y que ademas la unica forma de "resetear" por asi decirlo el estado de todos los radios es eliminando y volviendo a crear esos elementos, lo cual es una dudosa practica y no deberia hacerse.
    – Layer
    Commented el 2 mar. 2022 a las 22:11
  • @Riven, no me metí en esos detalles porque no parece querer resetear (que sí se puede). Voy a esperar a ver qué dice OP para ver si es necesario agregar algo al respecto. Gracias por el aporte.
    – Triby
    Commented el 2 mar. 2022 a las 22:16
  • Oh vaya, es cierto si se puede, pero esa es otra propuesta, la cual es resetear directamente todo el form.
    – Layer
    Commented el 2 mar. 2022 a las 22:30
  • @Riven, sí se puede cambiando el atributo checked, aunque no lo logré con jQuery, pero sí con el objeto HTMLElement... también creía que no era posible.
    – Triby
    Commented el 2 mar. 2022 a las 23:13
  • Bueno lo que estoy haciendo para poner la siguiente pregunta con sus respuestas, es eliminar los input radios que se pusieron anteriormente para agregar otros radios con las nuevas respuestas Commented el 3 mar. 2022 a las 0:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.