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

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的相应元素。

您还需要在.each()循环之外测试this.checked ，因为在循环内部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> 

Answer 3

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

每个ID都必须唯一，尽管它与解决方案没有直接关系。 如其他人所述，输入字段没有“已检查”状态，因此需要将其移出“每个”循环。

在这种情况下，由于两组输入位于离散容器中，因此您要做的就是遍历第一组并将值应用于第二组中的适用输入。