Comment changer le titre de certaines entrées de texte en fonction d'une radio avec jquery?

Question

Comme vous pouvez le voir sur http://jsbin.com/erivi/ J'utilise Jquery pour changer une image (et un attribut d'image) en fonction du bouton radio sélectionné, je supprime également le texte du formulaire lorsque je clique dessus.

Et maintenant, ce que j'essaie de faire est de changer le texte du formulaire en fonction du bouton radio coché.

Par exemple en cliquant sur "Choix 3" nous devrions voir "Texte de l'entrée 3".

Vous pouvez voir & modifier mon code en direct ici: http://jsbin.com/erivi/edit

La partie que je dois améliorer est:

imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/'; 
$("input[type='radio']").click(function() { 
    var strarr = this.title.split('|'); 
    if(strarr.length < 2) return; 
    $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', starr[2]); 
}); 

Et surtout .attr('title', starr[2]); qui est censé changer le titre en fonction de la 3e partie de mon titre de la radio (exemple: title='m602-1.png|Logo 3|Text of input 3')

Merci :)

Edit: J'ai oublié de mentionner que j'utilise plusieurs formulaires sur mon code réel, c'est pourquoi je cherche un moyen de le faire sans le nom particulier de la saisie de texte afin d'éviter de répéter le script pour d'autres saisies de texte.

Answer 1

EDIT: L'id de la zone de texte d'entrée doit être unique. De plus, vous devez définir .attr('title',strarr[2]), .val(strarr[2]) et la classe d'indication dans l'événement click du bouton radio. Des modifications doivent également être apportées à votre plugin inputdynvalue.

S'il vous plaît voir le code de travail complet mis à jour à http://jsbin.com/akawo

Mise à jour du plug-in Code

(function($) { 
    $.fn.inputdynvalue = function (options) { 
     var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); 
     return this.each(function(){ 
      var hvalue = opts.htext; 
      switch (opts.htext) { 
       case 'title' : hvalue = $(this).attr('title'); break; 
       case 'value' : hvalue = $(this).attr('value'); break; 
      } 
      $(this).attr('value', hvalue).addClass(opts.hclass) 
      .unbind('focus blur') 
      .bind('focus', function() {      
       if (this.value === this.title) { 
        this.value = ''; 
        $(this).removeClass(opts.hclass); 
       } 
      }) 
      .bind('blur', function() { 
       if (this.value === '') { 
        this.value = this.title; 
        $(this).addClass(opts.hclass); 
       } 
      }); 
     }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
     htext: 'title', 
     hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function(){ 
    $("input[type='text']").inputdynvalue(); 
}); 

Mise à jour Bouton Radio Cliquez sur Gestionnaire d'événements

$("input[type='radio']").click(function() { 
    var strarr = this.title.split('|'); 
    if(strarr.length < 2) return; 
    $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]); 
    $('#'+this.name+'_text') 
     .attr('title',strarr[2]) 
     .val(strarr[2]) 
     .addClass('hint'); 
}); 

Answer 2

Essayez ceci:

<form method="post" action=""> 
    <div> 
     <img id="iymok" src="http://download.kde.org/khotnewstuff/icons/previews/m732-1.png" alt="Alt by default" /> 
     <input type="text" id="iymok_text" title="Blablabla Text 1" /> 
     <label><input type="radio" checked="checked" name="iymok" title="m133-1.png|Logo 1|Blablabla Text 1" />Choice 1</label> 
     <label><input type="radio" name="iymok" title='m203-1.png|Logo 2|Text of input 2' />Choice 2</label> 
     <label><input type="radio" name="iymok" title='m602-1.png|Logo 3|Text of input 3' />Choice 3</label> 
    </div> 
</form> 
<script type="text/javascript"> 
    imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/'; 
    $("input[type='radio']").click(function() { 
     var strarr = this.title.split('|'); 
     if (strarr.length >= 3) { 
       $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', strarr[2]); 
       $('#'+this.name+'_text').attr('title', strarr[2]); 
     } 
    }); 
</script>