Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » calificar usando opciones o las caritas (imagenes)

JavaScript - calificar usando opciones o las caritas (imagenes)

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Eduardo Arroyo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

calificar usando opciones o las caritas (imagenes)

Publicado por Eduardo Arroyo (186 intervenciones) el 27/09/2021 22:13:03
Hola a todos.. espero esten muy bien, espero me puedan ayudar con este codigo.. les cuento tengo el siguiente codigo, me gustaria que al seleccionar la imagen de la carita correspondiente a cada calificación s eseleccione el radiobutton que le corresponde... por ejemplo pueden calificar seleccionando la opcion o tambien seleccionando la carita mostrada para cada opción....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<form name='form1' method='post' action=''>
  <table width='237' border='0' cellspacing='0' cellpadding='0'>
    <tr>
      <td height='23' colspan='4' bgcolor='#FF6600'><center>
        <span style='font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000;'><b>Califique Respuesta de PQR</b></span>
      </center></td>
    </tr>
    <tr>
      <td width='56' height='34' bgcolor='#FFFFFF'><center>
        <img src='excelente.png' width='20' height='20'>
      </center></td>
      <td width='54' bgcolor='#FFFFFF'><center>
        <img src='bueno.png' width='20' height='19'>
      </center></td>
      <td width='58' bgcolor='#FFFFFF'><center>
        <img src='regular.png' width='20' height='19'>
      </center></td>
      <td width='69' bgcolor='#FFFFFF'><center>
        <img src='malo.png' width='20' height='18'>
      </center></td>
    </tr>
    <tr>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Muy Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-size:10px; font-family:Arial, Helvetica, sans-serif'>Poco Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Nada Satisfecho</span>
      </center></td>
    </tr>
    <tr>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='4' id='RadioGroup1_4'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='3' id='RadioGroup1_5'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='2' id='RadioGroup1_6'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='1' id='RadioGroup1_7'></center></td>
    </tr>
    <tr>
      <td height='39' colspan='4' bgcolor='#FFFFFF'><center><input type='submit' name='button' id='button' value='Calificar'></center></td>
    </tr>
  </table>
</form>

sssss
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

calificar usando opciones o las caritas (imagenes)

Publicado por Jefferson (22 intervenciones) el 27/09/2021 23:46:44
Hola eduardo

Como no tienes ID en ningun elemento, se me ocurre atacar leyendo el dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.querySelectorAll("table td").forEach(function(elem) {
    elem.addEventListener("click", function(e) {
         switch (e.path[0].attributes[0].nodeValue) {
            case 'excelente.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[1].lastChild.children[0].checked=true;
            break;
            case 'bueno.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[3].lastChild.children[0].checked=true;
            break;
            case 'regular.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[5].lastChild.children[0].checked=true;
            break;
            case 'malo.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[7].lastChild.children[0].checked=true;
            break;
             default:
                 break;
         }
    });
});

Prueba y comentas
con ID seria mas sencillo
Saludos desde Venezuela
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

calificar usando opciones o las caritas (imagenes)

Publicado por Eduardo (186 intervenciones) el 28/09/2021 00:09:08
Sii funciona aca dejo el codigo para el que lo necesite...

Mil Gracias...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<form name='form1' method='post' action='calificar.php?codigo=$codigouy'>
  <table width='237' border='0' cellspacing='0' cellpadding='0'>
    <tr>
      <td height='23' colspan='4' bgcolor='#FF6600'><center>
        <span style='font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000;'><b>Califique Respuesta de PQR</b></span>
      </center></td>
    </tr>
    <tr>
      <td width='56' height='34' bgcolor='#FFFFFF'><center>
        <img src='excelente.png' width='20' height='20'>
      </center></td>
      <td width='54' bgcolor='#FFFFFF'><center>
        <img src='bueno.png' width='20' height='19'>
      </center></td>
      <td width='58' bgcolor='#FFFFFF'><center>
        <img src='regular.png' width='20' height='19'>
      </center></td>
      <td width='69' bgcolor='#FFFFFF'><center>
        <img src='malo.png' width='20' height='18'>
      </center></td>
    </tr>
    <tr>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Muy Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-size:10px; font-family:Arial, Helvetica, sans-serif'>Poco Satisfecho</span>
      </center></td>
      <td bgcolor='#FFFFFF'><center>
        <span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px'>Nada Satisfecho</span>
      </center></td>
    </tr>
    <tr>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='4' id='RadioGroup1_4'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='3' id='RadioGroup1_5'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='2' id='RadioGroup1_6'></center></td>
      <td bgcolor='#FFFFFF'><center><input type='radio' name='RadioGroup1' value='1' id='RadioGroup1_7'></center></td>
    </tr>
    <tr>
      <td height='39' colspan='4' bgcolor='#FFFFFF'><center><input type='submit' name='button' id='button' value='Calificar'></center></td>
    </tr>
  </table>
</form>
<script>
document.querySelectorAll("table td").forEach(function(elem) {
    elem.addEventListener("click", function(e) {
         switch (e.path[0].attributes[0].nodeValue) {
            case 'excelente.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[1].lastChild.children[0].checked=true;
            break;
            case 'bueno.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[3].lastChild.children[0].checked=true;
            break;
            case 'regular.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[5].lastChild.children[0].checked=true;
            break;
            case 'malo.png':
                elem.parentNode.nextElementSibling.nextElementSibling.childNodes[7].lastChild.children[0].checked=true;
            break;
             default:
                 break;
         }
    });
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar