jQuery:将所有输入(选择、单选按钮、复选框等)的值从页面的一个部分复制到另一部分

Question

有两个具有不同 id 但结构完全相同的 div。

<div id="block1">
   <input type="text" class="class1" value="a">
   <input type="text" class="class2" value="b">
   <input type="checkbox" class="class3"> checkbox
   <select class="class4">
       <option value="0">White</option>
       <option value="1">Brown</option>
       <option value="2">Gray</option>
   </select>
</div> 

和

<div id="block2">
   <input type="text" class="class1" value="a">
   <input type="text" class="class2" value="b">
   <input type="checkbox" class="class3"> checkbox
   <select class="class4">
       <option value="0">White</option>
       <option value="1">Brown</option>
       <option value="2">Gray</option>
   </select>
</div> 

在一页上。

我希望两个 block 看起来完全相同。因此，如果您更改了 block1 中的某些内容，那么在 block2 中也会发生相同的情况，并且如果 block2 分别发生更改，则 block1 也会发生相同的更改。

所以，我想要

$("#block1").change(function () {
    //apply ALL values from block1 to block2
});
$("#block2").change(function () {
    //apply ALL values from block2 to block1
});

这包括输入文本、输入复选框的值，甚至是所选选项的值。所有输入的类别和类型分别完全相同，选择框中的选项数量和值也分别相同。

使用 jQuery 实现这一点的最短方法是什么？是否可以使用一个 jQuery 字符串“复制”这些值？

Answer 1

为所有元素创建一个通用更改处理程序:

向主要元素添加一个类:

<div id="block1" class="blockClass">

JS

 /* ":input" selector includes all form controls*/
 $('.blockClass :input').change(function () {
    var $this = $(this);
    var $otherInput = $('.blockClass').not($this.closest('.blockClass')).find('.' + this.className);
    var isCheckable = $this.is(':radio,:checkbox');
    if (isCheckable) {
        $otherInput.prop('checked', this.checked);
    } else {    
        $otherInput.val($this.val());
    }
})

演示:http://jsfiddle.net/5ghRS/