jquery가있는 라디오에 따라 일부 텍스트 입력 제목을 변경하는 방법은 무엇입니까?

Question

http://jsbin.com/erivi/에서 볼 수 있듯이 선택한 라디오 버튼에 따라 이미지 및 이미지 속성을 변경하기 위해 Jquery를 사용하고 있습니다. 내부를 클릭하면 양식 텍스트도 제거됩니다.

그리고 지금 내가 뭘하려고하는지 확인 라디오 버튼에 따라 양식의 텍스트를 변경하는 것입니다.

예를 들어 "Choice 3"을 클릭하면 "Text of input 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

편집 : 입력 텍스트 상자의 ID는 고유해야합니다. 또한 .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(); 
}); 

업데이트 라디오 버튼 이벤트 핸들러가

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