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

Question

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

输出将是这样的：

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

使用下面的sn-p，通过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>