jQuery：将文本追加到输入中

Question

在单选检查后尝试将文本追加到输入中。 任何想法？ http://plnkr.co/edit/HvEBQa2pF43QfiNuFrkT?p=preview

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

Answer 1

您需要使用.val()回调函数在输入元素中附加值：

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

Answer 2

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

append()用于向该元素添加另一个元素。 您要做的是设置该input元素的值，因此请改用.val() 。

Answer 3

1. 在单选按钮上使用change事件
2. 使用val()设置文本框的值
3. 使用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");
});

更新的Plnkr

 $(document).ready(function() { $(":radio").change(function() { $("#result").val($(this).parent().text().trim() + " is checked"); }); }); 

 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <div class="col-lg-12"> <label class="radio-inline"> <input id="opt1" type="radio" name="optradio">Option1 </label> <label class="radio-inline"> <input id="opt2" type="radio" name="optradio">Option2 </label> <label class="radio-inline"> <input id="opt3" type="radio" name="optradio">Option3 </label> </div> <div class="col-lg-12"> <input id="result" type="text" class="form-control" value="" autocomplete="off" disabled/> </div> 

Answer 4

代替.append()尝试使用.val()如下所示：

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

不过，在这种情况下，实际上不需要使用.is(":checked") 。 您可以使用。

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

Answer 5

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

Answer 6

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

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

Answer 7

到目前为止，其他答案已经解决了该问题。 我的帖子只是向您展示，只要稍作更改，您就可以减少代码行数

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>

JS

// 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")
  })

柱塞