将多个输入的值传递给其他输入

Question

我有这段代码可以将值从多个输入传递到其他输入，并且运行良好。问题是我将一个输入的值保存在一个对象内部，但是如果执行此过程，则必须在该对象和条件语句内部添加8个值。

I found this answer

如何将其添加到我的代码中并使其起作用？

如何获取8个输入的值并将其传递给其他8个输入。

这是我的JS代码：

var data = {
  first_name: $('#first_name'),
}

if ($('#checkbox').is(':checked')) {
  $('#check_name').val(data.first_name.val());
}

$('#checkbox').change(function() {
  if ($('#checkbox').is(':checked')) {
    $('#check_firstname').val(data.first_name.val());
  } else {
    $('#check_name').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是我的观点

//These are which I'm getting the values
<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked" id="first_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
</form>

<!--These are the inputs which I'm passing the values-->

<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check" id="check_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
</form>

Answer 1

尝试一下：

$(".mt-4.mb-4.ml-4:eq(0) .row").each(function(i,r){
    $(".mt-4.mb-4.ml-4:eq(1) .row:eq("+$(r).index()+") input").val(function(I){return $(r).find(".col:eq("+$(this).parent().index()+")>input").val();});
});

这适用于此html结构。

Answer 2

如何执行此操作：

$('.checked').keyup(function () {            
    if (this.id === 'first_name' && ...some other condition...) {
        $('#check_name').val(this.value);             
     }
});

将keydown更改为keyup，因为在键盘按下时快速键入可能会跳过一些数据

Answer 3

基本上，Yoannes的方法是个好主意。我保留了keyup()位！但是，在进行所有名称和属性比较业务时，它变得有些乏味。

基本上，jQuery提供了内置方法index()。此方法返回匹配元素在其父容器内的相对位置。如果您的所有input元素都位于同一父级中，则 会起作用。 <div>。由于不是这种情况，我们将不得不更深入地研究：

我的方法创建两个jquery选择输入元素。每个<form>的一个：src和trg。然后，将keyup-event附加到第一种形式的所有输入元素上。附加函数获取输入的当前值，并找到元素在src的匹配DOM元素数组中的相对位置。然后，该函数将jquery-idx-collection的第trg个元素的值设置为txt。仅此而已：jquery-写更少，做更多！

是的，也可以通过.on('input' ...)绑定来完成，如下所示：

var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
var srca=$('form.mt-4.mb-4.ml-4:eq(0) input').on('input',function(){
 trg.eq($.inArray(this,srca)).val($(this).val());
}).get()

var src=$('form.mt-4.mb-4.ml-4:eq(0) input'), srca=src.get();
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
src.keyup(function(){
 var idx=$.inArray(this,srca);
 var txt=$(this).val();
 trg.eq(idx).val(txt);
})

form {font-family:verdana;font-size:8pt}
div.col {display:inline-block}
h6 {font-size:6pt;margin:0px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>1First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked" id="first_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control checked">
    </div>
  </div>
</form>

<!--These are the inputs which I'm passing the values-->

<form class="mt-4 mb-4 ml-4 ">
  <div class="row">
    <div class="col">
      <label for=""><h6>2First name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check" id="check_name">
    </div>
    <div class="col">
      <label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Street Address 2</h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>Country <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>City <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
  <div class="row mt-4">
    <div class="col">
      <label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
    <div class="col">
      <label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
      <input type="text" class="form-control check">
    </div>
  </div>
</form>