Question

我正在开发一个项目，我想在输入字段中添加单选按钮值。

输入字段是添加名称，单选按钮用于选择性别。默认情况下，它应该是＆＃34;我的名字＆＃34;在输入字段上，当用户检查单选按钮时，它应该添加文本＆＃34;我是{单选按钮值}＆＃34;。

我设法做了一些，但问题是：

当我切换单选按钮时，它会继续添加文本，看起来很傻。
默认显示值＆＃34;我是未定义的＆＃34;它应该是＆＃34;我的名字＆＃34;
如何确认用户在提交时选择了性别？

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

链接到小提琴示例

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

感谢您的帮助。

Answer 1

这是一个工作小提琴：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;
    }
});

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

Answer 2

首先在dom上执行函数displayVals();，但没有选择无线电，因此输入文本将获得未定义的vaule。其次，每次在无线电变化时添加旧值。看看这里：

＆＃13;

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']");
  //you want to add only the value of radio each time.
  input.val(a);

}

$("input[type='radio']").change(displayVals);
//why execute this one on dom ready??
//displayVals();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onblur="this.placeholder = 'my name'" onfocus="this.placeholder = ''" placeholder="my name" name="name" id="my name" class="InputText">
<input type="submit" value="Submit" class="SubmitButton">

<br>

<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>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>

＆＃13;

Answer 3

好的，有几件事：

从输入文字定义中删除onblur和onfocus，placeholder已经表现得那样。
删除对脚本

displayVals()

删除input.val重新分配中的input.val() +
要进行验证，您可以将关键字required添加到input radio代码的定义中，甚至两者都添加。

如何避免重复将选中的值添加到输入文本框中

3 个答案: