-3

我有三个文本框和几个复选框。我希望当我选择第一个复选框时，它会显示在第一个文本框中，当我选择第二个复选框时，它会显示在第二个文本框中，第三个复选框也是如此。我已经写了这个 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 是第一个文本框的 id， selectedtext1 是第二个文本框的 id。

4

1 回答 1

0

给你解决方案

$('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有助于将数据插入文本框的输入文本。

于 2020-03-20T08:27:50.647 回答