You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过现有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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.12 04:26:38