Javascript Jquery：将文本追加到输入中

尝试在无线电检查后将文本追加到输入中。 有什么想法吗

append（）

用于向该元素添加另一个元素。您要做的是设置

输入

元素的值，因此使用

.val（）

在单选按钮上使用

change

事件

使用

val（）

设置文本框的值

使用

parent（）

和

text（）

而不是分别在每个单选按钮上绑定事件，使代码成为动态的

代码：

// When the radio button state changes
$(":radio").change(function () {
    // Get the text associated with selected radio and set it
    // as value of the textbox
    $("#result").val($(this).parent().text().trim() + " is checked");
});

$（文档）.ready（函数（）{
$（“：radio”）.change（函数（）{
$（“#结果”）.val（$（this.parent（）.text（）.trim（）+”已选中）；
});
});

选择1
选择2
选择3
您需要使用
.val（）
的回调函数在输入元素中追加值：

$("#opt1").click(function(){
 if ($(this).is(":checked")) 
  $("#result").val(function(i,o){
    return o +"Option1 is checked";
  });
});

不要像这样尝试
.val（）
，而要使用
.append（）
：

  $("#opt2").click(function(){
    if ($(this).is(":checked")) {
      $("#result").val("Option2 is checked");
    }
  });

不过，在本例中，实际上不需要使用
。is（“：checked”）
。你可以用

  $("#opt2").click(function(){
      $("#result").val("Option2 is checked");
  });

将文本附加到输入的正确方法。首先，您必须获取输入的现有值，并将其与新值连接起来，即

$("#opt1").click(function(){
   if ($(this).is(":checked")) {
     $('#result').val($('#result').val() + 'Option1 is checked')
   }
});

到目前为止，其他答案已经解决了这个问题。我的帖子只是想告诉你，只要稍作改动，你就可以减少代码行数

HTML更改

// Added an attribute data-text which will be captured on checking radio button
<div class="col-lg-12">
    <label class="radio-inline">
        <input id="opt1" type="radio" data-text="Option 1" name="optradio">Option1
    </label>
    <label class="radio-inline">
        <input id="opt2" type="radio" data-text="Option 2" name="optradio">Option2
    </label>
    <label class="radio-inline">
        <input id="opt3" type="radio" data-text="Option 3" name="optradio">Option3
    </label>
  </div>
  <div class="col-lg-12">
      <input id="result" type="text" class="form-control" value="" autocomplete="off" disabled/>
  </div>

如果输入了#结果，请尝试
$（“#结果”）.val（“选中选项1”）最好使用
更改
而不是
单击
为什么
$（此）。是否（':checked'）
？你能取消选中收音机吗？@Tushar:它可以通过code
.prop（“选中”，false）进行请提供更多信息。“仅编码”和“尝试此”答案是错误的，因为它们不包含可搜索的内容，并且没有解释为什么有人应该“尝试此”。我们在这里努力成为知识资源。为什么
$（this）.是（':checked'）
？你能取消选中收音机吗？我只是用了OP-his代码，没有费心去修改它，因为那不是他问的。为什么
$（这个）。是（':checked'）
？你能取消选中收音机吗？它包含在问题中，因为他只想在选中收音机时添加文本。它不是复选框，而是它的单选按钮。为什么
$（这）。它是（'：checked'）
？你能取消选中收音机吗？嗯，在这种情况下你真的不需要它。我刚刚将您的原始代码改为使用.val（）。这也会起作用$（“#opt2”）。单击（函数（）{$（“#结果”）.val（“选中选项2”）；}）；您可以将
$（this）.is（“：checked”）
替换为
this.checked
$(document).ready(function () {

    $("#opt1").click(function () {
        if ($(this).is(":checked")) {
            $("#result").val("Option1 is checked");
        }
    });

    $("#opt2").click(function () {
        if ($(this).is(":checked")) {

            $("#result").val("option 2 is checked");
        }
    });
});

$("#opt1").click(function(){
   if ($(this).is(":checked")) {
     $('#result').val($('#result').val() + 'Option1 is checked')
   }
});

// Added an attribute data-text which will be captured on checking radio button
<div class="col-lg-12">
    <label class="radio-inline">
        <input id="opt1" type="radio" data-text="Option 1" name="optradio">Option1
    </label>
    <label class="radio-inline">
        <input id="opt2" type="radio" data-text="Option 2" name="optradio">Option2
    </label>
    <label class="radio-inline">
        <input id="opt3" type="radio" data-text="Option 3" name="optradio">Option3
    </label>
  </div>
  <div class="col-lg-12">
      <input id="result" type="text" class="form-control" value="" autocomplete="off" disabled/>
  </div>

// fired if there is a change  in inputs with same name
$('input[name=optradio]').change(function(){ 
   // get the data-text attribute of the checked radio button
    var _getId = $('input[name=optradio]:checked').attr('data-text');
  // Update the result input with this value
    $("#result").val(_getId +" is checked")
  })