jqueryのクローン要素の変更に基づいてclone（）ソースを更新する方法はありますか？

Question

私は、チェックボックス入力を含むクローンされた要素を持っています。クローンされた要素がチェックされていないときは、ソース要素もチェックしないようにする必要があります。 jQueryでこれを行う方法はありますか？または、私はこれを間違った方向に進めていますか（つまり、clone()を使用しています）？私は私の質問がSO questionに似ていることを言及する必要がありますが、複製された要素が変更されたときに元の要素を更新する必要がある点を除けば、単に参照を維持するだけではありません。

Answer 1

のようなもの「changeに」 。

var copy = $('#my-element').clone(); 

copy.change(function(){ 
    $('#my-element').replaceWith(copy.clone()); 
}); 

Answer 2

複製された要素にイベントリスナーを追加して、変更時に元の内容を更新します。

ボックスのcheckedステータスが変更するたびに発生します、それはチェックボックスだとあなたはボックスのチェックを外す/チェックと特異的に関係しているので、あなたがイベントをリッスンすることができ、この

var initial = $('some-element'), 
    cloned = initial.clone(); 

cloned.on('change', function(){ 
    initial 
     .prop('checked', this.checked) 
     .trigger('change'); 
}); 

Answer 3

$(document).ready(function() { 
 
\t var $source = $("#source input[type='checkbox']"); 
 
\t var $target = $source.clone(true, true); 
 
\t $("#target").append($target); 
 
    
 
    // set current source value .. 
 
    $($source).prop("checked", $target.prop("checked")); 
 
    // update source to target and vice-verse, on change ... 
 
\t $target.change((event) => { 
 
\t \t $($source).prop("checked", $(event.target).prop("checked")); 
 
\t }); 
 
\t $source.change((event) => { 
 
\t \t $($target).prop("checked", $(event.target).prop("checked")); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="source"> 
 
    <span>source</span> 
 
    <input type="checkbox"/> 
 
</div> 
 

 
<div id="target"> 
 
    <span>target</span> 
 
</div>