如何通过现有Checkbox触发JQuery函数实现表单字段值同步?
解决方案:通过Checkbox触发表单字段同步逻辑
很简单,你只需要给目标Checkbox绑定change事件,在事件回调里调用已经写好的onChange同步函数就行。如果需要仅在勾选时触发同步,还可以加个状态判断,下面是修改后的完整代码:
$(function() { // 缓存DOM元素,提升性能 var $residenza = $('#residenza'); var $domicilio = $('#domicilio'); var $capResidenza = $('#capResidenza'); var $capDomicilio = $('#capDomicilio'); // 同步逻辑函数 function onChange() { $domicilio.val($residenza.val()); $capDomicilio.val($capResidenza.val()); }; // 原有的输入框事件绑定 $('#residenza') .change(onChange) .keyup(onChange); $('#capResidenza') .change(onChange) .keyup(onChange); // 新增:Checkbox的事件绑定(替换#yourCheckboxId为你实际的Checkbox选择器) $('#yourCheckboxId').change(function() { // 如果Checkbox被勾选,执行同步 if ($(this).is(':checked')) { onChange(); } // 如果你希望点击(无论勾选/取消)都触发,可以去掉上面的if判断,直接调用onChange() }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
关键说明:
- 记得把代码里的
#yourCheckboxId替换成你表单中实际的Checkbox的ID(或者其他合适的选择器,比如类名)。 - 如果需求是只要点击Checkbox就触发同步(不管是勾选还是取消勾选),可以简化Checkbox的事件绑定为:
$('#yourCheckboxId').change(onChange); - 保留了原有的
keyup和change事件绑定,确保输入框内容变化时依然能自动同步。
内容的提问来源于stack exchange,提问作者Azrayne
相关产品推荐
相关产品推荐

