0

Mi problema es que tengo una lista con 40 preguntas de las cuales en cada pregunta hay 2 radio-buttons con diferente id, mismo name, llamar por el name pregunta por pregunta es tedioso y quisiera saber, si hay otro modo quizás ¿llamarle por la clase tal vez?

<table  id="table"  width="100%"  align="center">

<tr>
<td colspan="1" class="subtitulo">LISTA DE VERIFICACION </td>
<td class="Subtitulo">SI</td>
 <td class="Subtitulo">NO</td>
<td class="Subtitulo">NA.</td>
<td class="Subtitulo">ACTIVIDAD</td>
</tr>
<tr>
<td><label >Prueba1</label></td>
<td><input type="radio" value="1" id="miradio1"  name="a" class="giru"></td>
<td><input type="radio" value="2" id="miradio2" name="a" class="giru" /></td>
</tr>
<tr>
<td><label >Prueba 2</label></td>
<td><input type="radio" value="1" id="miradio3" name="b" class="giru"/></td>
<td><input type="radio" value="2" id="miradio4" name="b" class="giru"/></td>
</tr>
<tr>
<td><label>Prueba 3</label></td>
<td><input type="radio" value="1"  id="miradio5"  name="e" class="giru"/></td>
<td><input type="radio" value="2"  id="miradio6"  name="e" class="giru"/></td>
</tr>	
</table>

3
  • Usas Jquery? seria rapido
    – juliocpiro
    Commented el 31 ago. 2017 a las 16:07
  • Cual es tu error?
    – zerokira
    Commented el 31 ago. 2017 a las 16:23
  • como llamaría por Jquery? por el tipo? Commented el 31 ago. 2017 a las 16:25

3 respuestas 3

1

Para esto no necesitas realmente JavaScript o jQuery, puedes usar HTML dándole el atributo required a los radio buttons. Al ponerle required, el navegador no dejará enviar el formulario hasta que alguno de los radio buttons con el mismo nombre haya sido seleccionado.

Aquí lo puedes ver funcionando con tu código. Intenta enviar el formulario sin seleccionar respuesta en alguna de las preguntas, el navegador bloqueará el envío porque no se seleccionó un campo requerido:

<form>
<table  id="table"  width="100%"  align="center">
<tr>
<td colspan="1" class="subtitulo">LISTA DE VERIFICACION </td>
<td class="Subtitulo">SI</td>
 <td class="Subtitulo">NO</td>
<td class="Subtitulo">NA.</td>
<td class="Subtitulo">ACTIVIDAD</td>
</tr>
<tr>
<td><label >Prueba1</label></td>
<td><input type="radio" value="1" id="miradio1"  name="a" class="giru" required></td>
<td><input type="radio" value="2" id="miradio2" name="a" class="giru" required /></td>
</tr>
<tr>
<td><label >Prueba 2</label></td>
<td><input type="radio" value="1" id="miradio3" name="b" class="giru" required/></td>
<td><input type="radio" value="2" id="miradio4" name="b" class="giru" required/></td>
</tr>
<tr>
<td><label>Prueba 3</label></td>
<td><input type="radio" value="1"  id="miradio5"  name="e" class="giru" required/></td>
<td><input type="radio" value="2"  id="miradio6"  name="e" class="giru" required/></td>
</tr>	
</table>
<input type="submit">
</form>

0

Agrega Jquery en <head:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Validando:

if($("[name='a']:checked").val()!=undefined){
    alert('seleccionado:' + $("[name='a']:checked").val());
}else{
    alert('sin seleccinar');
}

Podrias hacerlo una funcion:

ValidaCheck : function(vname){
    if($("[name='"+vname+"']:checked").val()!=undefined){
        alert('seleccionado:' + $("[name='a']:checked").val());
    }else{
        alert('sin seleccinar');
    }
}

//invocando
validaCheck('a');
validaCheck('b');
validaCheck('e');
3
  • ¿y haría eso para cada una de las preguntas? Commented el 31 ago. 2017 a las 16:26
  • podrías hacerlo una función, luego un array con los names que podría ayudarte a personalizar el mensaje de validación, Falta llenar el dato a, etc.
    – juliocpiro
    Commented el 31 ago. 2017 a las 16:30
  • Si te ha servido dale +1 y márcala cómo válida, si no contácteme por los comentarios
    – juliocpiro
    Commented el 31 ago. 2017 a las 20:06
0

En el siguiente ejemplo te agrego en JavaScript una función que te genera una matriz con el valor seleccionado por el usuario únicamente obteniendo los elementos por su clase.

function validarForm () {
  var lstRadios = document.getElementsByClassName("giru");
  var respuestas = [];

  Array.prototype.forEach.call(lstRadios, function(elemento) {
    var pregunta = [ false, false ];
    if (elemento.checked) {
      pregunta[elemento.value - 1] = true;
      respuestas.push(pregunta);
    }
  });

  console.log(respuestas);
}
<table  id="table"  width="100%"  align="center">
<tr>
<td colspan="1" class="subtitulo">LISTA DE VERIFICACION </td>
<td class="Subtitulo">SI</td>
<td class="Subtitulo">NO</td>
<td class="Subtitulo">NA.</td>
<td class="Subtitulo">ACTIVIDAD</td>
</tr>
<tr>
<td><label >Prueba1</label></td>
<td><input type="radio" value="1" id="miradio1"  name="a" class="giru"></td>
<td><input type="radio" value="2" id="miradio2" name="a" class="giru" /></td>
</tr>
<tr>
<td><label >Prueba 2</label></td>
<td><input type="radio" value="1" id="miradio3" name="b" class="giru"/></td>
<td><input type="radio" value="2" id="miradio4" name="b" class="giru"/></td>
</tr>
<tr>
<td><label>Prueba 3</label></td>
<td><input type="radio" value="1"  id="miradio5"  name="e" class="giru"/></td>
<td><input type="radio" value="2"  id="miradio6"  name="e" class="giru"/></td>
</tr>	
</table>

<button type="button" onclick="validarForm();">Validar</button>

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.