jQuery的 - 克隆所有值的所有领域的一个div到其他领域内的另一个DIV

您好所有尊重程序员..jQuery的 - 克隆所有值的所有领域的一个div到其他领域内的另一个DIV

我在克隆值的小问题，从某些字段（输入，文本区域，选择）内的div到另一个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

有了这些特殊的鳕鱼es，我可以检查并取消选中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); 
     });   
    }

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

问：

如何正确检查，并取消根据该first DIV的second DIV中的复选框？

任何帮助将不胜感激！

问候..

来源

2014-09-21 KeepMove

好吧..所以我想出了这个解决方案是完全为我工作：

$("#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

来源

2014-09-21 03:42:18 KeepMove

jQuery的 - 克隆所有值的所有领域的一个div到其他领域内的另一个DIV

回答

相关问题