Как изменить название некоторого ввода текста в зависимости от радио с jquery?

Question

Как вы можете видеть на http://jsbin.com/erivi/ Я использую JQuery для изменения некоторого изображения (и атрибута изображения) в зависимости от выбранного переключателя, я также удаляю текст формы при нажатии внутри него.

И теперь я пытаюсь изменить текст формы в зависимости от переключателя.

Например, при нажатии «Выбор 3» мы должны увидеть «Текст ввода 3».

Вы можете увидеть & редактировать мой код здесь жить: http://jsbin.com/erivi/edit

Часть мне нужно улучшить это:

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]); 
}); 

И особенно .attr('title', starr[2]);, который должен изменить название в зависимости от 3-й части моего название радио (Exemple: title='m602-1.png|Logo 3|Text of input 3')

Спасибо :)

Редактирование: я забыл упомянуть, что я использую несколько форм для своего реального кода, поэтому я ищу способ сделать это без конкретного имени ввода текста, чтобы избежать повторения скрипта для другого ввода текста.

Answer 1

EDIT: Идентификатор входного текстового поля должно быть уникальным. Кроме того, вам необходимо установить .attr('title',strarr[2]), .val(strarr[2]) и класс подсказок внутри события щелчка переключателя. Также необходимо внести изменения в ваш плагин inputdynvalue.

Пожалуйста, смотрите полный обновленный рабочий код на http://jsbin.com/akawo

Обновленный плагин код

(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(); 
}); 

Обновлено Radio Button Нажмите Event Handler

$("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

Попробуйте это:

<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>