0

tengo un código JS que cuando selecciono uno de los 2 input radio de un form me devuelve si es correcta o incorrecta la pregunta. Necesito por favor saber como seleccionar el radio le pinche donde le pinche en el div ya que cuando le doy click al div tan solo me cambia el color pero no me deja el radio seleccionado.

El código es el siguiente

JS:

$("#listado li ul li div").click(function(){
        if($(this).attr('class')=='correcto seleccionado'){            /*si acierta*/
            $(this).removeClass().addClass('acertado_usuario');
            $(this).siblings('.normal').removeClass().addClass('resto');
        }
        else if($(this).attr('class') == 'normal seleccionado') {       /*si no acierta*/
            $(this).removeClass().addClass('fallado');
            $(this).siblings('.normal').removeClass().addClass('resto');
            $(this).siblings('.correcto').removeClass().addClass('acertado');
        }
        $(this).attr("disabled", true);
        $(this).siblings().attr("disabled", true);
        $(this).css('cursor', 'default');                         
        $(this).siblings().css('cursor', 'default');              

        correctas = $('.acertado_usuario').size();
        falladas = $('.fallado').size();
        no_answer = $('.correcto').size();
        nota = ((correctas - (falladas /(4-1)))/total) * 10;
        nota4 = ((correctas / total) - (falladas /(4 * total))) * 10;

        $("#resultado_a").html("Correctas: "+correctas);
        $("#resultado_b").html("Incorrectas: "+falladas);
        $("#resultado_c").html("Sin respuesta: "+no_answer);
        $("#resultado_d").html("Nota: "+nota.toFixed(2));
    });

Y el form contiene los siguientes radios:

<div class="correcto"><input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?></div>
<div class="normal"><input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?></div>
7
  • deberías utilizar el método hasClass('yourClass') en lugar de la comprobación a través del attr ya que estas constantemente cambiando las clases y podria generar error.
    – David
    Commented el 21 feb. 2018 a las 15:31
  • Perfecto!!! y si quisiera ocultar el radio? es decir que en el DIV solo me aparezca el texto del input...
    – Vieira
    Commented el 21 feb. 2018 a las 15:34
  • yo dejaría los input type radio como ocultos y mediante javascript al pulsar sobre el div accionas el input, al estar oculto no se vería pero al mandar el formulario si que te saldria como marcado.
    – David
    Commented el 21 feb. 2018 a las 15:36
  • Si les pongo a los input radio style="display:none" no selecciona, es decir, cuando al final hago el POST no la cuenta...
    – Vieira
    Commented el 21 feb. 2018 a las 15:42
  • has probado style="visibility: hidden" ? también tienes que accionar la pulsacion del radio cuando se pulse el div
    – David
    Commented el 21 feb. 2018 a las 15:57

2 respuestas 2

0

$('#correcto').click(function(){
  $('#chkCorrecto').click();
});

$('#normal').click(function(){
  $('#chkNormal').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<form action="#">
<div id="correcto">Correcto</div>
<div id="normal">Normal</div>
<input type="radio" name="chkComprobacion" id="chkCorrecto" value="correcto" style="visibility: hidden;">
<input type="radio" name="chkComprobacion" id="chkNormal" value="normal" style="visibility: hidden;">
<button type="submit">Enviar</button>
</form>

prueba esto a ver si se envía el formulario con el check correspondiente

2
  • Tampoco funciona David. De todas formas no puedo alterar el id, name y value del input ya que de ello depende luego el POST que hago al enviar el form.
    – Vieira
    Commented el 21 feb. 2018 a las 16:23
  • eso no importa, para el javascript solo necesitas añadirle un id o una clase para poder referenciarlos, el resto lo puedes dejar como lo tenias
    – David
    Commented el 21 feb. 2018 a las 16:24
0

Si pongo este código fuera del JS que puse arriba sí que selecciona el radio, pero sigue apareciendo el boton de radio.

$('.correcto').click(function() {
    $(this).find('input').prop('checked', true)    
    });
$('.normal').click(function() {
    $(this).find('input').prop('checked', true)    
});

Creo que lo que busco es hacer algo como esto:

$(".normal :radio").hide().click(function(e)
1
  • Este código de alguna manera me gustaria integrarlo en mi JS, por eso el mareo.
    – Vieira
    Commented el 21 feb. 2018 a las 16:38

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.