Question

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

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

Answer 1

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

$("#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

在单选按钮上使用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");
});

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

Plunker

Jquery：将文本追加到输入中

7 个答案: