Se connecter / S'enregistrer

Résolu [JS]input type radio

Solutions (8)
Tags :
  • Input
  • Javascript
  • Radio
  • Script
  • Programmation
|
Bonjour,

Etant une bille en javascript... j'ai essayer d'adapter un script trouvé sur google, mais j'ai un petit soucis...

Voici le script:

  1. <script type="Text/JavaScript">
  2. function turnImgRadio(objRadio)
  3. {
  4. var t_img = document.getElementById('radio').getElementsByTagName('img');
  5.  
  6. for (var i = 0; i < t_img.length; i++)
  7. {
  8. t_img[i].src = 'images/radio.png';
  9. }
  10.  
  11. var img = document.getElementById('img_radio_' + objRadio.id);
  12. img.src = 'images/radio2.png';
  13. }
  14.  
  15. </script>


Et voici mon fomulaire (du moins en partie):
  1. <form method="post" id="radio">
  2. <table width="100%" cellpadding="0" cellspacing="0" align="center">
  3. <tr>
  4. <td width="10%">13/11/2010</td>
  5. <td width="10%">20:00</td>
  6. <td width="15%">Equipe 1</td>
  7. <td width="17%">
  8. <input type="radio" name="match1" class="inputRadio"
  9.  
  10. onclick="turnImgRadio(this)" id="1" />
  11. <img src="images/radio.png" class="radio" id="img_radio_1" />
  12. <input type="radio" name="match1" class="inputRadio"
  13.  
  14. onclick="turnImgRadio(this)" id="2" />
  15. <img src="images/radio.png" class="radio" id="img_radio_2"/>
  16. <input type="radio" name="match1" class="inputRadio"
  17.  
  18. onclick="turnImgRadio(this)" id="3" />
  19. <img src="images/radio.png" class="radio" id="img_radio_3" />
  20. </td>
  21. <td width="15%">Equipe 2</td>
  22. </tr>
  23. <tr>
  24. <td width="10%">13/11/2010</td>
  25. <td width="10%">20:00</td>
  26. <td width="15%">Equipe 3</td>
  27. <td width="17%">
  28. <input type="radio" name="match2" class="inputRadio"
  29.  
  30. onclick="turnImgRadio(this)" id="4" />
  31. <img src="images/radio.png" class="radio" id="img_radio_4" />
  32. <input type="radio" name="match2" class="inputRadio"
  33.  
  34. onclick="turnImgRadio(this)" id="5" />
  35. <img src="images/radio.png" class="radio" id="img_radio_5"/>
  36. <input type="radio" name="match2" class="inputRadio"
  37.  
  38. onclick="turnImgRadio(this)" id="6" />
  39. <img src="images/radio.png" class="radio" id="img_radio_6" />
  40. </td>
  41. <td width="15%">Equipe 4</td>
  42. </tr>
  43. <tr>
  44. <td colspan="5"><input type="submit" value="Terminer" id="bouton"
  45.  
  46. disabled="disabled" /></td>
  47. </tr>
  48. </table>
  49. </form>


Et le CSS:
  1. #conteneur #contenu #col2 .radio {
  2. display: inline-block;
  3. width: 15px;
  4. height: 20px;
  5. }
  6.  
  7. #conteneur #contenu #col2 .inputRadio {
  8. opacity: 0;
  9. filter: alpha(opacity=0);
  10. position: absolute;
  11. width: 15px;
  12. height: 20px;
  13. margin: -1px 0 0 -1px;
  14. }


Le script fonctionne très bien quand je n'ai que l'input name (match1) mais dés que j'ajoute un nouveau match (match2), il mélange tout les input comme ci le name était le meme =/

J'espere avoir été claire, et merci d'avance pour vos solutlion :) 
Contenus similaires
Meilleure solution
partage
|
Slt,

j'ai fait ton script différemment que j'ai commenter pour que tu vois ce que j'ai fait.
  1. <script type="Text/JavaScript">
  2. function turnImgRadio(objRadio)
  3. {
  4. var t_img = document.getElementById('radio').getElementsByTagName('img'); //Tableau des img presentes dans le formulaire "radio"
  5. var t_input = document.getElementById('radio').getElementsByTagName('input'); //Tableau des input presents dans le formulaire "radio"
  6.  
  7. for (var i = 0 ; i < t_input.length ; i++) //Parcours des input
  8. {
  9. if(t_input[i].checked) //Si l'input courant est cocher
  10. {
  11. t_img[i].src = 'ic2.jpg'; //Deuxieme image pour l'image correspondant au input
  12. }else //Sinon
  13. {
  14. t_img[i].src = 'ic1.jpg'; //Image de base
  15. }
  16. }
  17. }
  18. </script>
  • Commenter cette solution |
Score
0
òh
òi
|
Plus d'erreur, merci ;) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Bon voici la correction, j'ai fait une erreur bête et m'en excuse auprès de tout ceux qui liront ces lignes :) 

Remplace la ligne du for par celle-ci :
  1. for (var i = 0 ; i < t_input.length-1 ; i++) //Parcours des input


Voila @+
  • Commenter cette réponse |
Score
0
òh
òi
|
Lol ba je vais quand même regarder a nouveau, si on peux enlever ça, ça sera mieux :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par allstar27.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bah bizzarement ca tombe sur le "else" enfin pas grave ;) 

Merci!
  • Commenter cette réponse |
Score
0
òh
òi
|
Faudrait que tu me donne la ligne 22 lol
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci Divx ca fonctionne, mais j'ai une erreur dans la barre de notification à chaque fois que je clic 'undifined' is null or not an object ligne 22 caractère 13...

Ca pas trop grave mais si il y avait moyen de l'enlever =) merci
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS