[SOLUCIONADO] valor de radio a input text

natalya · #1 (**permalink**) 05/07/2015, 22:32

Hola chicos de jquery espero me puedan orientar con esto:
Tenego "N" cantidad de preguntas que obtengo dinamicamente con php con 2 radios y un input text que se pintan dependiendo el numero de preguntas.

Quisiera que al seleccionar SI o NO (este mismo SI o NO) se ponga en su input text correspondiente, cabe resaltar que los valores de cada radio ya los tengo ocupados por otros datos que recojo con php tambien es por eso que les añadi un atributo "data-resp".

ej. HTML ya pintado

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Radios</title>
</head>
<body>
    <section>
        <div>
            <form action="">
                <table>
                    <thead>
                        <th>Pregunta</th>
                        <th>Respuesta</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                Nombre
                            </td>
                            <td>
                                Si <input type="radio" name="radio[1]" id="radio[1]" value="10" data-resp="SI"> 
                                No <input type="radio" name="radio[1]" id="radio[1]" value="20" data-resp="NO"> 
                            </td>
                            <td>
                                <input type="text" name="resp1" id="resp1">
                            </td>                   
                        </tr>
                        <tr>
                            <td>
                                Dirección
                            </td>
                            <td>
                                Si <input type="radio" name="radio[2]" id="radio[2]" value="10" data-resp="SI"> 
                                No <input type="radio" name="radio[2]" id="radio[2]" value="20" data-resp="NO">
                            </td>
                            <td>
                                <input type="text" name="resp2" id="resp2">
                            </td>                           
                        </tr>
                        <tr>
                            <td>
                                Teléfono
                            </td>
                            <td>
                                Si <input type="radio" name="radio[3]" id="radio[3]" value="10" data-resp="SI"> 
                                No <input type="radio" name="radio[3]" id="radio[3]" value="20" data-resp="NO">
                            </td>
                            <td>
                                <input type="text" name="resp3" id="resp3">
                            </td>                           
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </section>
</body>
</html>

Y este seria el resultado ya con los "SI" o "NO" seleccionados.

Con uno solo hice el ejemplo pero ya con los demas no me funciona:

Código Javascript:

Ver original$(document).ready(function() {
   
    $('input:radio').on("click", function() {      
      $("#resp1").val($(this).attr("data-resp"));   
 
    });
  });

Pero para los demas como seria si puedo tener 3 o 5 o 10 preguntas?

Alexis88 · #2 (**permalink**) 05/07/2015, 22:51

Como agrupas las opciones y cajas de texto por filas, toma a la caja de texto correspondiente a la fila en la cual se encuentra la opción marcada.

Código Javascript:

Ver original$(this).parents("tr").find("[type=text]").val($(this).data("resp"));

Con el método .parents(), busco a los ancestros del elemento afectado por el clic pero solo tomo de ellos al que sea un <tr>; luego, busco en él a algún elemento <input type = "text"> usando el método .find() y le asigno el valor del atributo personalizado data-resp el cual tomo mediante el método .data(), teniendo que indicar entre los paréntesis del mismo solo la segunda parte de su nombre.

Saludos

natalya · #3 (**permalink**) 06/07/2015, 09:19

Excelente muchas gracias!