JS为选民登记应用复选框绑定click event 实现邮寄地址自动填充居住地址

算力阿峰

2026-9-27

你可以直接在页面中插入以下JavaScript代码实现需求：

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取「与邮寄地址一致」复选框元素
  const useMailAddrCheckbox = document.getElementById('useMailAddress');
  // 邮寄地址字段ID列表
  const mailFields = ['address1', 'address2', 'city', 'state', 'zip'];
  // 居住地址对应字段ID列表，顺序和邮寄地址一一对应
  const resFields = ['resAddress1', 'resAddress2', 'resCity', 'resState', 'resZip'];

  // 给复选框绑定change事件，比click事件兼容性更好，适配键盘操作场景
  useMailAddrCheckbox.addEventListener('change', function() {
    if (this.checked) {
      // 勾选状态：将邮寄地址内容批量复制到居住地址
      mailFields.forEach((fieldId, index) => {
        const mailValue = document.getElementById(fieldId).value;
        const resField = document.getElementById(resFields[index]);
        resField.value = mailValue;
        // 可选：勾选后禁用居住地址输入框，避免用户误修改，不需要可以删除该行
        resField.disabled = true;
      });
    } else {
      // 取消勾选状态：清空居住地址内容，恢复可编辑状态
      resFields.forEach(fieldId => {
        const resField = document.getElementById(fieldId);
        resField.value = '';
        resField.disabled = false;
      });
    }
  });
});