Question

大家好，尊敬的程序员......

我在div中将某些字段（input，textarea，select）的值克隆到另一个div中的其他字段时遇到了一些问题。

我的实际问题是我无法正确复制选中的复选框。

以下是我的代码：

HTML

<div id="first">
<button id="cloneto">Clone all values to second div</button>
<br><br>
    <span>FIRST</span><br>
    <input type="text" name="first[a]" class="a" value="a"/>
     <input type="text" name="first[h]" class="h" value="h"/>

    <select name="first[b]" class="b">
        <option value="0">0</option>
        <option value="1" selected>1</option>
         <option value="2">2</option>       
    </select>
    <p>
<input type="checkbox" name="first[c]" class="c" value="c" checked/>        
 <input type="checkbox" name="first[w]" class="w" value="w" />        
   <p>
<textarea name="first[d]" class="d">Textarea</textarea>   

</div>

<hr>
    <!--SECOND DIV-->
<div id="second">  
    <span>SECOND</span><br>    
    <input type="text" name="second[a]" class="a" value="second"/>
      <input type="text" name="second[h]" class="h" value="hsecond"/>


    <select name="second[b]" class="b">
        <option value="0">0</option>
        <option value="1">1</option>
         <option value="2">2</option>       
    </select>
    <p>
<input type="checkbox" name="second[c]" class="c" value="checkbox"/>   
  <input type="checkbox" name="second[w]" class="w" value="ws" checked/>        
   <p>
<textarea name="second[d]" class="d">Different!</textarea>    
</div>

的jQuery

$("#cloneto").on("click", function(){
    var values = [];
    $(this).parent().find("input, select, textarea").each(function(i, v){
   values.push($(this).val());

   if($(this).attr("type") == "checkbox"){

if($(this).is(":checked")) {             $("#second").find("input[type=checkbox]").each(function(i, v){
             $(this).prop("checked", true);
   });          
       } else {   $("#second").find("input[type=checkbox]").each(function(i, v){
             $(this).prop("checked", false);
        });          
       }

   } else {
        $("#second").find("input, select, textarea").each(function(i, v){
        $(this).val(values[i]);
        }); 
   }
    });

});

FIDDLE

使用这些特定代码，我可以选中并取消选中second div中的复选框，但它无法正确执行。如果未选中first div的最后一个复选框，则second div中的所有复选框都不会被选中，反之亦然。

  if($(this).is(":checked")) {  
       $("#second").find("input[type=checkbox]").each(function(i, v){
         $(this).prop("checked", true);
       });          
  } else {
      $("#second").find("input[type=checkbox]").each(function(i, v){
           $(this).prop("checked", false);
      });          
  }

我不知道如何选择具有相同索引的复选框。

问题：

如何根据second div正确检查和取消选中first div中的复选框？

非常感谢任何帮助！

最诚挚的问候..

Answer 1

好的..所以我想出了这个完全适合我的解决方案：

    $("#cloneto").on("click", function(){
        var values = [];
        var checked = [];

        $(this).parent().find("input, select, textarea").each(function(i, v){
       values.push($(this).val());

       if($(this).attr("type") == "checkbox"){

   // read the checkbox and mark it out
    if($(this).is(":checked")) {
        checked.push("chk");
    }   else {
     checked.push("nchk");   
    }   


 $("#second").find("input[type=checkbox]").each(function(i, v){

// compare
if(checked[i] == "chk") {
                 $(this).prop("checked", true);
        } else {
           $(this).prop("checked", false); 
        }
        });          

       } else {
            $("#second").find("input, select, textarea").each(function(i, v){
            $(this).val(values[i]);
            }); 
       }
        });

    });

发生了什么？

创建一个数组变量，以便在first div。
在选中的复选框和未选中的复选框之间给出不同的值。
读取second div复选框迭代中的值并执行相关操作（检查和取消选中）。

JS FIDDLE

jQuery - 在DIV中克隆所有字段的所有值到另一个DIV内的其他字段

1 个答案: