Застрял в jquery с флажками

Question

У меня есть три текстовых поля и несколько флажков. Я хочу, чтобы при выборе первого флажка он отображался в первом текстовом поле, а при выборе второго флажка он отображался во втором текстовом поле и аналогично для третьего флажка. Я написал это jquery, но он не работает должным образом. Помогите кому-нибудь: - Мой HTML код для текстового поля: -

<div class="col-md-4">
  <!-- <h4><strong>REDEEM YOUR GIFT/GIFT VOUCHER</strong></h4>
  <h5><em>Kindly fill-in your Promotional Code and Coupon No. in the boxes below.</em></h5> -->
  <div class="form-group">
    <input required type="text" class="form-control wizard-required" id="selectedtext" name="selectedtext">
    <label for="voucher-code" class="wizard-form-text-label">Option 1*</label>
    <div class="wizard-form-error"></div>
  </div>
</div>

Мой HTML код для флажков: -

<div class="wizard-form-radio">
  <input name="check_list[]" class="chkbx" type="checkbox" value="Bangkok">
  <label for="Bangkok">Bangkok</label>
</div>
<div class="wizard-form-radio">
  <input name="check_list[]" class="chkbx" type="checkbox" value="Pattaya">
  <label for="Pattaya">Pattaya</label>
</div>

Это мой jQuery: -

$('.chkbx').click(function(){
  var text = "";
  $('.chkbx:checked').each(function(){
    text+=$(this).val() + ',';
  });
  text=text.substring(0,text.length-1);
  $('#selectedtext').val(text);
  var text1 = "";
  $('.chkbx:checked').each(function(){
    text1+=$(this).val() + ',';
  });

  text1=text1.substring(0,text1.length-1);
  $('#selectedtext1').val(text1);

Здесь selectedtext - это идентификатор первого текстового поля, а selectedtext1 - это идентификатор второго текстового поля.

Answer 1

Вот вам go с раствором

$('input[type=checkbox]').click(function() {
  var val = ($(this).prop("checked")) ? $(this).val() : "";
  var textboxKey=$(this).attr("textboxKey");
  
  $("#" + textboxKey).val(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required type="text" class="form-control wizard-required" id="selectedtext" name="selectedtext">
<input required type="text" class="form-control wizard-required" id="selectedtext1" name="selectedtext1"> 
<div class="wizard-form-radio">
  <input name="check_list[]" class="chkbx" type="checkbox" value="Bangkok" textboxKey="selectedtext">
  <label for="Bangkok">Bangkok</label>
</div>
<div class="wizard-form-radio">
  <input name="check_list[]" class="chkbx" type="checkbox" value="Singapore" textboxKey="selectedtext1">
  <label for="Singapore">Singapore</label>
</div>

Надеюсь, это то, что вы ищете.

Я использовал пользовательский атрибут textboxKey в флажке просто создать отображение между флажком и текстовым полем. textboxKey содержит введенный текст id, который поможет вставить данные в текстовое поле.