从单选按钮获取输入值

Question

我试图在选中/单击单选按钮时在输入字段中显示值。但是当我包含bootstrap.min.js
时它不起作用 JSFiddle

$('input:radio').click(function() {
      document.getElementById("whatever").innerHTML = $(this).val();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
        <label class="btn btn-primary w-100 active">
                    <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
                  </label>
        <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
                  </label>
        <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
                  </label>
        <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
                  </label>
      </div>
    </div>
    <div class="container">
      <div class="form-group">
        <input id="whatever" class="form-control">
      </div>
    </div>

如果用户单击“ 15”，则该值在输入字段中显示15。

PS：当我禁用bootstrap.min.js并添加<div id="whatever"></div>时，该代码有效。

Answer 1

您不得将innerHTML使用input，而应使用value：

$('input:radio').click(function() {
  document.getElementById("whatever").value = $(this).val();
});

Answer 2

  

PS：当我禁用bootstrap.min.js并添加

时，该代码有效

对于第二个问题，您需要使用值更改innerHTML。

对于第一个问题，您需要更改事件类型。

实际上，您的主要问题在以下行中：

$('input:radio').click(function() {

对于单选按钮，您需要使用 change 事件：

$(':radio').on('change', function() {

$(':radio').on('change', function() {
    $("#whatever").val($(this).val());
});

.container {
  margin-top: 30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container">
    <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
        <label class="btn btn-primary w-100 active">
            <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
        </label>
        <label class="btn btn-primary w-100">
            <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
        </label>
        <label class="btn btn-primary w-100">
            <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
        </label>
        <label class="btn btn-primary w-100">
            <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
        </label>
    </div>
</div>
<div class="container">
    <div class="form-group">
        <input id="whatever" class="form-control">
    </div>
</div>

Answer 3

不要不匹配，请尝试这种方式。

$('input:radio').click(function() {
  $("#whatever").val( $(this).val());
});

.container {
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
    <label class="btn btn-primary w-100 active">
                <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
              </label>
  </div>
</div>
<div class="container">
  <div class="form-group">
    <input id="whatever" class="form-control">
  </div>
</div>

Answer 4

使用.value标记代替.innerHTML和<input />

.innerHTML：

  

div.innerHTML ==“某些文本”

<div>some text</div>

。值：

  

input.value ==“某些文本”

<input value="some text"/>

希望现在会更加清楚。

下面是工作代码：

$('input:radio').click(function() {
  document.getElementById("whatever").value = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
    <label class="btn btn-primary w-100 active">
                <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
              </label>
  </div>
</div>
<div class="container">
  <div class="form-group">
    <input id="whatever" class="form-control">
  </div>
</div>

Answer 5

您正在输入字段中使用innerHTML。输入字段仅具有val()或value属性。

$('input:radio').click(function() {
  $("#whatever").val($(this).val());
});

OR

$('input:radio').click(function() {
  $("#whatever").value = $(this).val();
});

JSFiddle snippet已更新。

Answer 6

除了给出的答案：如果您在问题中提到bootstrap.min.js时遇到问题，还可以使用change处理程序。

$(document).on('change', "input[type='radio']", function (event) {
  document.getElementById("whatever").value = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
  <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
    <label class="btn btn-primary w-100 active">
                <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
              </label>
  </div>
</div>
<div class="container">
  <div class="form-group">
    <input id="whatever" class="form-control">
  </div>
</div>