获取选中的单选按钮对应的文本字段值

Question

我正在使用 bootstrap 从所选单选按钮的文本字段中获取相应的文本值。

输出将是这样的：

function selectedRadioButton()
{ 
  console.log($('input[name=radiobutton]:checked', '#myForm').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="myForm">
    <div class="input-group col-sm-3">
            <div class="input-group-prepend">
              <div class="input-group-text">
              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
              </div>
            </div>
            <input type="text" name="txtbox" class="form-control" aria-label="Text input with radio button">
    </div>
    </br>
    <div class="input-group col-sm-3">
            <div class="input-group-prepend">
              <div class="input-group-text">
              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
              </div>
            </div>
            <input type="text" name="txtbox" class="form-control" aria-label="Text input with radio button">
    </div>

</div>

<button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

我应该如何将单选按钮与文本字段值关联起来？

Answer 1

使用下面的代码片段，使用 jquery.

获取元素的值

function selectedRadioButton() {
  console.log($($('input[name=radiobutton]:checked').closest('.input-group').find("input[type=text]")).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group" id="myForm">
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" class="form-control" aria-label="Text input with radio button">
  </div>
  </br>
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" class="form-control" aria-label="Text input with radio button">
  </div>

</div>

<button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

获取选中的单选按钮对应的文本字段值

Getting the selected radio button's corresponding text field value

html

textfield

radio-button

twitter-bootstrap

bootstrap-4