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

Question

I have two fields. There are multiple text boxes inside of each fields. I would like to copy all of the text values from the box 1 to box 2 without putting up the specific target for each text boxes. Here is my markup and my js code.

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

A simple loop over the corresponding inputs will do the job:

 $('[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 passes the index of the element to the function. You can use this to update the corresponding element of the other DIV.

You also need to test this.checked outside the .each() loop, because inside the loop this refers to the current element of the loop, not the checkbox that you clicked on.

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

Each ID must be unique though it has no direct bearing on the solution. As someone else noted, input fields do not have a "checked" state so it needs to be moved out of that "each" loop.

In this case, since the two sets of inputs are in discrete containers, all you have to do is loop through the first set and apply the values to the applicable input in the second set.