javascript - 有没有办法根据对 jquery 中克隆元素的更改来更新 clone() 源？

Question

我有一个包含复选框输入的克隆元素。当克隆元素未选中时，我需要源元素也未选中。有没有办法在 jQuery 中做到这一点？还是我以错误的方式（即使用clone()）？我应该提一下，我的问题类似于这个SO question，除了我需要在克隆元素更改时更新原始元素，而不仅仅是维护参考。

Answer 1

由于它是一个复选框，并且您特别关心选中/取消选中该框，因此您可以侦听事件“ change ”，该事件将在每次框的checked状态更改时触发。

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

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

Answer 2

在克隆元素上添加一个事件侦听器，以便在更改原始元素时更新它。

像这样的东西

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

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

Answer 3

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

<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>