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

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，因为在keydown 时，如果您快速键入可能会跳过一些数据

Answer 3

基本上，Yoannes 的方法是一个好主意。我保留了keyup()-bit！但是，所有名称和属性比较业务都会变得有点乏味。

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

我的方法创建了两个输入元素的 jquery 选择。每个<form>s：src 和 trg。然后我将 keyup-event 附加到第一个表单的所有输入元素。附加函数获取输入的当前值，并在src 的匹配 DOM 元素数组中找到元素的相对位置。然后该函数将 jquery-trg-collection 的 idx-th 元素的值设置为 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>