¿Cómo cambiar el título de una entrada de texto dependiendo de una radio con jquery? - jquery, botón de radio, título, entrada de texto

Como puedes ver en http://jsbin.com/erivi/ Estoy usando Jquery para cambiar alguna imagen (y atributo de imagen) dependiendo del botón de opción seleccionado, también estoy eliminando el texto del formulario al hacer clic dentro de él.

Y ahora, lo que estoy tratando de hacer es cambiar el texto del formulario dependiendo del botón de opción marcado.

Por ejemplo, al hacer clic en "Opción 3" deberíamos ver "Texto de la entrada 3".

Puedes ver y editar mi código en vivo aquí: http://jsbin.com/erivi/edit

La parte que necesito mejorar es:

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

Y particularmente .attr("title", starr[2]); que se supone que cambia el título dependiendo de la tercera parte de mi título de radio (por ejemplo: title="m602-1.png|Logo 3|Text of input 3" )

Gracias :)

Editar: Olvidé mencionar que estoy usando varios formularios en mi código real, por eso busco una forma de hacerlo sin el nombre particular de la entrada de texto para evitar repetir el script para otra entrada de texto.

Respuestas

2 para la respuesta № 1

EDITAR: El id del cuadro de texto de entrada tiene que ser único. Además, necesitas configurar .attr("title",strarr[2]), .val(strarr[2]) y la clase de pistas dentro del evento de clic del botón de radio. También es necesario realizar algunos cambios en su inputdynvalue enchufar.

Por favor vea el código de trabajo actualizado completo en http://jsbin.com/akawo

Código de complemento actualizado

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

Botón de opción actualizado. Controlador de eventos.

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

---

1 para la respuesta № 2

Prueba esto:

<form method="post" action="">
<div>
<img id="iymok" src="/images/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>

---