3

tengo un cuadro, en ese cuadro está la descripción con sus notas cada vez que yo seleccione un radio button, este se encuentre en total y a lo ultimo de su nota final tengo el html, el cuadro y un poco de jQuery.

Este es un programa para dar su nota y su criterio de evaluación que el selector sea automático junto a la nota final suma de todos los input con sus radio button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $("input[type='radio']").on('change', function() {
                $("#rInput2").val($("input:radio[name=radio]:checked").val());
                sumar();


            });
        </script>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Cuadro</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
    <section class="uno">

        <table width="974.0008999999999" height="372.667" border="3">
            <tbody>
                <tr>
                    <th width="429.333" height="48.6667" scope="col" class="letra1">&nbsp;Aspectos de evaluación</th>
                    <th width="100" scope="col" class="calificacion1">&nbsp;0,2</th>
                    <th width="75.3333" scope="col" class="calificacion2">&nbsp;0,3</th>
                    <th width="81.3333" scope="col" class="calificacion3">&nbsp;0,5</th>
                    <th width="77.3333" scope="col" class="calificacion4">&nbsp;0,7</th>
                    <th width="78.6667" scope="col" class="calificacion5">&nbsp;1,0</th>
                    <th width="106" scope="col" class="total">&nbsp;Total</th>
                </tr>

                <tr>
                    <th height="46" scope="col">&nbsp;Señala claramente la idea central del tema y muestra las ideas de apoyo en cada párrafo.</th>
                    <th scope="col"><input type="radio" name="radio" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio" id="radio1" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio" id="radio2" value="0,5"> </th>
                    <th scope="col"> <input type="radio" name="radio" id="radio3" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio" id="radio4" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>

                </tr>

                <tr>
                    <th height="46" scope="col">&nbsp;Se expresa con sus propias palabras y puede conectar el lenguaje empleado por el autor, de manera adecuada</th>
                    <th scope="col"><input type="radio" name="radio1" id="input3" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio6" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio7" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio8" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio9" value="1,0"></th>
                    <th scope="col"><input id="rInput3" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>

                <tr>
                    <th height="53.3333" scope="col">&nbsp;Utiliza frases breves y párrafos organizados de no más de 11 líneas. Evita coloquialismos y palabras innecesarias. Además, sabe parafrasear las ideas del autor.</th>
                    <th scope="col"><input type="radio" name="radio2" id="input4" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio11" value="0,3"> </th>
                    <th scope="col"><input type="radio" name="radio2" id="radio12" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio13" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio14" value="1,0"></th>
                    <th scope="col"><input id="rInput4" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>


                <tr>
                    <th height="52" scope="col">&nbsp;Contextualiza y trata la información de manera adecuada</th>
                    <th scope="col"><input type="radio" name="radio3" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio16" value="0,2"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio17" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio18" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio19" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>

                <tr>
                    <th height="54" scope="col">&nbsp;El uso de la ortografía, la y puntuación y los conectores lógicos es evidente en la redacción del texto.</th>
                    <th scope="col"><input type="radio" name="radio4" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio21" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio22" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio23" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio24" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>
                <tr>
                    <th height="28.6667" scope="col">&nbsp;Evaluacion total</th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col">
                        <div id="resultado4"><input id="Subtotal" type="text" disabled>
                    </th>
                </tr>
            </tbody>
        </table>
</body>

</html>

1
  • 2
    Pero, que es lo que falla o no te funciona? Commented el 5 ago. 2021 a las 20:00

1 respuesta 1

1

El problema es que siempre cambias el valor del mismo campo, porque accedes por ID. Te recomiendo:

  • Usar $(this) para obtener el radio que fue marcado, será cualquiera en la tabla, no solo el de una fila en específico
  • Obtener la fila de la tabla a donde pertenece el radio: .closest('tr')
  • Buscar el campo a actualizar, especificando el tipo .find('input[type="text"]')
  • Finalmente, asignar el valor .val(nuevoValor), tomándolo desde el radio que disparó el evento

$("input[type='radio']").on('change', function() {
    $(this).closest('tr').find('input[type="text"]').val($(this).val());
    // sumar();
});
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Cuadro</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
    <section class="uno">

        <table width="974.0008999999999" height="372.667" border="3">
            <tbody>
                <tr>
                    <th width="429.333" height="48.6667" scope="col" class="letra1">&nbsp;Aspectos de evaluación</th>
                    <th width="100" scope="col" class="calificacion1">&nbsp;0,2</th>
                    <th width="75.3333" scope="col" class="calificacion2">&nbsp;0,3</th>
                    <th width="81.3333" scope="col" class="calificacion3">&nbsp;0,5</th>
                    <th width="77.3333" scope="col" class="calificacion4">&nbsp;0,7</th>
                    <th width="78.6667" scope="col" class="calificacion5">&nbsp;1,0</th>
                    <th width="106" scope="col" class="total">&nbsp;Total</th>
                </tr>

                <tr>
                    <th height="46" scope="col">&nbsp;Señala claramente la idea central del tema y muestra las ideas de apoyo en cada párrafo.</th>
                    <th scope="col"><input type="radio" name="radio" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio" id="radio1" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio" id="radio2" value="0,5"> </th>
                    <th scope="col"> <input type="radio" name="radio" id="radio3" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio" id="radio4" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>

                </tr>

                <tr>
                    <th height="46" scope="col">&nbsp;Se expresa con sus propias palabras y puede conectar el lenguaje empleado por el autor, de manera adecuada</th>
                    <th scope="col"><input type="radio" name="radio1" id="input3" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio6" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio7" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio8" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio1" id="radio9" value="1,0"></th>
                    <th scope="col"><input id="rInput3" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>

                <tr>
                    <th height="53.3333" scope="col">&nbsp;Utiliza frases breves y párrafos organizados de no más de 11 líneas. Evita coloquialismos y palabras innecesarias. Además, sabe parafrasear las ideas del autor.</th>
                    <th scope="col"><input type="radio" name="radio2" id="input4" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio11" value="0,3"> </th>
                    <th scope="col"><input type="radio" name="radio2" id="radio12" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio13" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio2" id="radio14" value="1,0"></th>
                    <th scope="col"><input id="rInput4" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>


                <tr>
                    <th height="52" scope="col">&nbsp;Contextualiza y trata la información de manera adecuada</th>
                    <th scope="col"><input type="radio" name="radio3" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio16" value="0,2"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio17" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio18" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio3" id="radio19" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>

                <tr>
                    <th height="54" scope="col">&nbsp;El uso de la ortografía, la y puntuación y los conectores lógicos es evidente en la redacción del texto.</th>
                    <th scope="col"><input type="radio" name="radio4" id="input2" value="0,2" checked=""></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio21" value="0,3"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio22" value="0,5"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio23" value="0,7"></th>
                    <th scope="col"><input type="radio" name="radio4" id="radio24" value="1,0"></th>
                    <th scope="col"><input id="rInput2" type="text" placeholder="0,2" class="monto">

                    </th>
                </tr>
                <tr>
                    <th height="28.6667" scope="col">&nbsp;Evaluacion total</th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col"> </th>
                    <th height="35.6667" scope="col">
                        <div id="resultado4"><input id="Subtotal" type="text" disabled>
                    </th>
                </tr>
            </tbody>
        </table>
</body>

</html>

2
  • gracias si me sirvió una parte pero a lo ultimo quiero que sume todos los input y me de la nota final ? Commented el 5 ago. 2021 a las 21:36
  • @TatianaRodriiguez, asigna una clase a esos campos y los recorres con .each() para hacer la suma.
    – Triby
    Commented el 5 ago. 2021 a las 21:57

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.