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

Stack Overflow用户

提问于 2015-05-20 12:31:34

回答 3查看 1.8K关注 0票数 0

我有两个领域。每个字段中有多个文本框。我希望将所有文本值从框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>

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-20 12:36:57

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

$('[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>

票数 2

Stack Overflow用户

发布于 2015-05-20 12:39:16

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

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

$('[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('')
        }
    });
});

<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>

票数 1

Stack Overflow用户

发布于 2015-05-20 12:49:37

$('[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('');
      });
    }
});

<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>