Question

我有两个字段。每个字段内都有多个文本框。我想将方框1中的所有文本值复制到方框2，而不是为每个文本框设置特定目标。这是我的标记和我的js代码。

$('[name="copy"]').click(function(){
    $('input[type="text"]').each(function(){
        if ($(this.checked)) {
            $('#box2 input').val($(this).val());
        } else {
            $('#box2 input').val('')
        }
    });
});

<div id="box1">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox1" value="Default"/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox2" value="Value"/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox3" value="Here"/>
  </div>
</div>
  
<div id="box2">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox1" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox2" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox3" value=""/>
  </div>
</div>

<div class="form-checkbox">
  <label>Copy the text values of Textbox 1</label>
  <input type="checkbox" id="checkbox" name="copy" />
</div>

Answer 1

对相应输入的简单循环将完成这项工作：

$('[name="copy"]').click(function(){
  // get a list of all text fields in the first div 
  var ins = $('#box1 input[type="text"]');

  // get a matching list of all text fields in the second div 
  var outs = $('#box2 input[type="text"]');
  
  // look at each item in the list(s) (they're the same length)
  for ( var i = 0; i < ins.length; ++i )
    // for each one, if the checkbox is checked, set the second box's 
    // input value to the matching value from the first
    //
    // if it's unchecked, empty out the second box's input's value
    //
    outs[i].value = this.checked ? ins[i].value : '';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box1">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox11" value="Default"/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox12" value="Value"/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox13" value="Here"/>
  </div>
</div>
  
<div id="box2">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox21" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox22" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox23" value=""/>
  </div>
</div>

<div class="form-checkbox">
  <label>Copy the text values of Textbox 1</label>
  <input type="checkbox" id="checkbox" name="copy" />
</div>

Answer 2

.each将元素的索引传递给函数。您可以使用它来更新其他DIV的相应元素。

您还需要在this.checked循环之外测试.each()，因为循环内部this指的是循环的当前元素，而不是您单击的复选框。

＆＃13;

$('[name="copy"]').click(function(){
    var copy = this.checked;
    $('#box1 input[type="text"]').each(function(i){
        if (copy) {
            $('#box2 input').eq(i).val($(this).val());
        } else {
            $('#box2 input').eq(i).val('')
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox1" value="Default"/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox2" value="Value"/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox3" value="Here"/>
  </div>
</div>
  
<div id="box2">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="textbox1" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="textbox2" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="textbox3" value=""/>
  </div>
</div>

<div class="form-checkbox">
  <label>Copy the text values of Textbox 1</label>
  <input type="checkbox" id="checkbox" name="copy" />
</div>

＆＃13;

Answer 3

＆＃13;

$('[name="copy"]').click(function(){
    var originalTextboxes = $('#box1').find('input[type="text"]');
    var copyTextboxes = $('#box2').find('input[type="text"]');
  
    if (this.checked) {
      originalTextboxes.each(function(i){
        $(copyTextboxes[i]).val($(this).val());
      });
      
    } else {
      copyTextboxes.each(function() {
        $(this).val('');
      });
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="box1-textbox1" value="Default"/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="box1-textbox2" value="Value"/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="box1-textbox3" value="Here"/>
  </div>
</div>
  
<div id="box2">
  <div class="form-item">
    <label>Textbox 1: </label>
    <input type="text" id="box2-textbox1" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 2: </label>
    <input type="text" id="box2-textbox2" value=""/>
  </div>
  <div class="form-item">
    <label>Textbox 3: </label>
    <input type="text" id="box3-textbox3" value=""/>
  </div>
</div>

<div class="form-checkbox">
  <label>Copy the text values of Textbox 1</label>
  <input type="checkbox" id="checkbox" name="copy" />
</div>

＆＃13;

每个ID必须是唯一的，尽管它与解决方案没有直接关系。正如其他人所说，输入字段没有＆＃34;已检查＆＃34;状态，所以它需要被移出＆＃34;每个＆＃34;循环。

在这种情况下，由于两组输入都在离散容器中，所以您只需遍历第一组并将值应用于第二组中的适用输入。

将文本框的所有值复制到另一个文本框

3 个答案: