如何使用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]); 应该根据我的广播标题的第三部分更改标题（例如：title='m602 -1.png|Logo 3|输入文本 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>