jquery - 如何避免在输入文本框中重复添加选中的值

Question

我正在做一个元素，我想将单选按钮值添加到输入字段。

输入框用于添加姓名，单选框用于选择性别。默认情况下，输入字段上应该是“我的名字”，当用户选中单选按钮时，它应该添加文本“我是{单选按钮值}”。

我已经设法做到了其中的一些，但问题是:

1. 当我切换单选按钮时，它一直在添加文本，而且看起来很傻。
2. 默认情况下它显示值“我是一个未定义的”，而它应该是“我的名字”
3. 我如何验证用户在提交时选择了性别？

 <input type="radio" id="single" name="sex" value="Boy">Boy &nbsp;  &nbsp; |  &nbsp;&nbsp; 
 <input type="radio" id="single" name="sex" value="Girl">Girl     
 <br><br><br><br>
 <p></p>

Jquery 脚本

function displayVals() {
var a = $("input[type='radio']:checked").val();
var b = "I am a";

var checkedValue = $( "p" ).html( "<b>I am a </b> " + " " + a );

var input = $("input[type='text']");
input.val(input.val() + b + " " + a);

}

$( "input[type='radio']" ).change( displayVals );
displayVals();

fiddle 示例的链接是

http://jsfiddle.net/ssbrbsfp/2/

感谢您的帮助。

Answer 1

这是一个工作 fiddle :http://jsfiddle.net/ssbrbsfp/6/

为避免重复结果，不要在其中重新附加 input.val :

input.val(b + " " + a);

在填充输入和 p 之前检查该值是否未定义:

if(a != undefined)
{
    $( "p" ).html( "<b>I am a </b> " + " " + a );
    var input = $("input[type='text']");
    input.val(b + " " + a);
}
else
{
    $( "p" ).html( "<b>I am a </b> ");
}

提交前验证:

$(".SubmitButton").click(function () {
    if($("input[type='radio']:checked").val() == undefined)
    {

        alert("You must choose a sex");
        return false;
    }
});

我把它放在提交按钮上以向您展示行为，但您应该将它放在表单提交事件中。