如何通过单选按钮和链接选择文本框的值？

Question

我想使用小提琴链接中的以下逻辑运行代码。

1. 选择单选按钮
2. 单击所需链接
3. 此链接将写在单选按钮的文本框中

---

• 当您选择之前选择的单选按钮时，它可以更改。
• 我的代码中有一个错误。当您在选择另一个按钮之后选择一个单选按钮并选择一个链接时，此选择的链接正在写入这些选择的单选按钮的2个文本框中。

---

JS小提琴

http://jsfiddle.net/johnvaldetine/ncxsajep/66/

HTML

$('.bayi').on('change', function(e) {
  let hangi = $('input[type=radio]:checked').val();
  console.log(hangi);
  if($('#d'+hangi).val().length > 0){
    // $('#d'+hangi).val(link);
    console.log('Zaten değer var.');
    console.log($('#d'+hangi).val());
  }
  else
  {
    console.log('Boş.')
    $('#secenekler a').click(
      function() {
        const link = $(this).attr('id');
        let tb = '#d'+hangi;
        console.log(tb);
        $(tb).val(link);
        tb = '';
        hangi = '';
      });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="secenekler">

<a id="ali" href="#">Ali</a> <a id="veli" href="#">Veli</a> <a id="mehmet" href="#">Mehmet</a> <a id="lorem" href="#">Lorem</a>
</div>
<p></p>
<p></p>



<form id="form">
  <input type="radio" name="bayi" class="bayi" value="1" > <input id="d1" type="text" ><br>
  <input type="radio" name="bayi" class="bayi" value="2"> <input id="d2" type="text"><br>
  <input type="radio" name="bayi" class="bayi" value="3"> <input id="d3" type="text">  
</form> 

Answer 1

您有2个问题 1，请不要清空hangi的值，也不要一次又一次地绑定a click

我已删除hangi = '';，因此可以根据用户需要对其进行更改。

我将$('#secenekler a').click(移出了更改，因此它不会一次又一次地绑定。

hangi必须与两者共享，因此它应该位于顶部。

这是我改变的事情。

let hangi = '';
$('.bayi').on('change', function(e) {


  hangi = $('input[type=radio]:checked').val();

  console.log(hangi);

  if ($('#d' + hangi).val().length > 0) {
    // $('#d'+hangi).val(link);
    console.log('Zaten değer var.');
    console.log($('#d' + hangi).val());
  } else {
    console.log('Boş.')

  }

});

$('#secenekler a').click(
  function() {
    const link = $(this).attr('id');
    let tb = '#d' + hangi;
    console.log(tb);
    $(tb).val(link);
    tb = '';


  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secenekler">

  <a id="ali" href="#">Ali</a> <a id="veli" href="#">Veli</a> <a id="mehmet" href="#">Mehmet</a> <a id="lorem" href="#">Lorem</a>
</div>
<p></p>
<p></p>



<form id="form">
  <input type="radio" name="bayi" class="bayi" value="1"> <input id="d1" type="text"><br>
  <input type="radio" name="bayi" class="bayi" value="2"> <input id="d2" type="text"><br>
  <input type="radio" name="bayi" class="bayi" value="3"> <input id="d3" type="text">
</form>

Answer 2

请检查单击链接时是否选中了任何单选按钮，而不是将单击功能放入单选按钮更改功能中。

$('#secenekler a').click(function() {
 // get the id;
  const link = $(this).attr('id');
  // get checked radio button
  let k = $('input[name=bayi]:checked').val();
  // if any button is checked then update the value in input
  if (k !== undefined) {
    $('#d' + k).val(link)
  } else {
    console.log('Please select a radio button')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secenekler">

  <a id="ali" href="#">Ali</a> <a id="veli" href="#">Veli</a> <a id="mehmet" href="#">Mehmet</a> <a id="lorem" href="#">Lorem</a>
</div>
<p></p>
<p></p>



<form id="form">
  <input type="radio" name="bayi" class="bayi" value="1">
  <input id="d1" type="text"><br>
  <input type="radio" name="bayi" class="bayi" value="2">
  <input id="d2" type="text"><br>
  <input type="radio" name="bayi" class="bayi" value="3">
  <input id="d3" type="text">
</form>