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

Question

볼 수 있듯이 http://jsbin.com/erivi/ 선택한 라디오 버튼에 따라 일부 이미지 (및 이미지 속성)를 변경하기 위해 jQuery를 사용하여 내부를 클릭 할 때 양식 텍스트를 제거하고 있습니다.

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

예를 들어 "Choice 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]); 라디오 제목의 세 번째 부분에 따라 제목을 변경해야합니다 (예 : 예상 : 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>