页面加载时同步配送与账单地址功能JSFiddle可用但浏览器失效求助

我来帮你梳理下问题所在，你的需求其实很清晰：页面加载时默认勾选「配送地址与账单地址相同」，让两个区域的地址信息自动同步；点击这个复选框时，显示账单表单区域并清空原有内容，方便用户填写独立的账单信息。先看看原代码里几个导致浏览器中失效的关键问题：

原代码的核心问题 #

1. window.onload写法错误：原代码window.onload = toggle(), onPageLoad();会立即执行两个函数，而非绑定到页面加载事件上，这会导致DOM还未完全渲染就执行代码，无法正确获取元素。
2. 重复ID冲突：配送和账单区域里有大量重复的id（比如last、address、city等），getElementById只能获取到第一个匹配的元素，后续DOM操作全错。
3. 逻辑矛盾的toggle函数：这个函数会来回切换复选框状态，和你“默认勾选”的需求完全相悖。
4. 事件绑定不规范：用setAttribute('onkeyup', ...)绑定实时同步事件，不仅写法老旧，取消勾选时也无法正确移除事件，还会因为配送区域有邮箱输入、账单区域没有导致循环索引错误。

修正后的完整代码 #

HTML（修复重复ID，默认勾选复选框）

<form name="checkout" method="post" id="payment-form" action="/templates/dropindemo.php">
  <section id="shipping">
    <h2>Shipping</h2>
    <label for="shipping-first">First name</label>
    <input type="text" autocomplete="given-name" placeholder="Hermionie" name="fname" id="shipping-first">
    <label for="shipping-last">Last name</label>
    <input type="text" autocomplete="family-name" placeholder="Granger" name="lname" id="shipping-last">
    <br>
    <label for="shipping-address">Address</label>
    <input type="text" autocomplete="street-address" placeholder="12 Grimmauld Place" name="address" id="shipping-address">
    <label for="shipping-city">City</label>
    <input type="text" autocomplete="address-level2" placeholder="London" name="city" id="shipping-city">
    <br>
    <label for="shipping-state">State</label>
    <input type="text" autocomplete="address-level1" placeholder="Greater London" name="state" id="shipping-state">
    <label for="shipping-zip">Postal Code</label>
    <input type="number" pattern="\d*" autocomplete="postal-code" placeholder="WC1N1 9LX" name="zip" id="shipping-zip">
    <label for="shipping-country">Country</label>
    <select name="country" id="shipping-country">
      <option selected hidden disabled value="">United Kingdom</option>
      <option value="USA">United States</option>
    </select>
    <br>
    <label for="shipping-email">E-mail</label>
    <input type="email" autocomplete="email" placeholder="hermionie@spew.org" name="email" id="shipping-email">
    <br>
    <!-- 默认勾选复选框 -->
    <input type="checkbox" id="shiptobill" checked />
    <label for="shiptobill">My shipping and billing info are the same</label>
  </section>
  <!-- 默认隐藏账单区域 -->
  <section id="billing" style="display: none;">
    <h2>Billing</h2>
    <label for="billing-first">First name</label>
    <input type="text" autocomplete="given-name" placeholder="Harry" name="bfname" id="billing-first">
    <label for="billing-last">Last name</label>
    <input type="text" autocomplete="family-name" placeholder="Potter" name="blname" id="billing-last">
    <br>
    <label for="billing-address">Address</label>
    <input type="text" autocomplete="street-address" placeholder="4 Private Drive" name="baddress" id="billing-address">
    <label for="billing-city">City</label>
    <input type="text" autocomplete="address-level2" placeholder="Little Winging" name="bcity" id="billing-city">
    <br>
    <label for="billing-state">State</label>
    <input type="text" autocomplete="address-level1" placeholder="Surrey" name="bstate" id="billing-state">
    <label for="billing-zip">Postal Code</label>
    <input type="number" pattern="\d*" autocomplete="postal-code" placeholder="RG12 9FG" name="bzip" id="billing-zip">
    <label for="billing-country">Country</label>
    <select name="bcountry" id="billing-country">
      <option selected hidden disabled value="">United Kingdom</option>
      <option value="USA">United States</option>
    </select>
    <br>
  </section>
</form>

JavaScript（优化逻辑，规范事件绑定）

// 获取核心DOM元素
const shipToBillCheckbox = document.getElementById('shiptobill');
const shippingSection = document.getElementById('shipping');
const billingSection = document.getElementById('billing');

// 同步配送地址到账单地址
function syncShippingToBilling() {
  // 指定需要同步的字段（排除邮箱，因为账单区域没有）
  const syncFieldNames = ['fname', 'lname', 'address', 'city', 'state', 'zip'];
  
  syncFieldNames.forEach(fieldName => {
    const shippingInput = shippingSection.querySelector(`[name="${fieldName}"]`);
    const billingInput = billingSection.querySelector(`[name="b${fieldName}"]`);
    
    if (shippingInput && billingInput) {
      // 初始同步值
      billingInput.value = shippingInput.value;
      // 绑定实时同步事件
      shippingInput.addEventListener('input', () => {
        billingInput.value = shippingInput.value;
      });
    }
  });
  
  // 同步国家下拉框
  const shippingCountry = shippingSection.querySelector('[name="country"]');
  const billingCountry = billingSection.querySelector('[name="bcountry"]');
  if (shippingCountry && billingCountry) {
    billingCountry.value = shippingCountry.value;
    shippingCountry.addEventListener('change', () => {
      billingCountry.value = shippingCountry.value;
    });
  }
}

// 清空账单区域所有输入
function clearBillingFields() {
  const billingInputs = billingSection.querySelectorAll('input, select');
  billingInputs.forEach(input => {
    input.value = '';
    // 重置下拉框到默认选项
    if (input.tagName === 'SELECT') {
      input.selectedIndex = 0;
    }
  });
  
  // 移除配送区域的同步事件（通过克隆元素实现）
  const shippingInputs = shippingSection.querySelectorAll('input, select');
  shippingInputs.forEach(input => {
    const clonedInput = input.cloneNode(true);
    input.replaceWith(clonedInput);
  });
}

// 处理复选框切换逻辑
function handleCheckboxToggle() {
  if (shipToBillCheckbox.checked) {
    // 勾选状态：显示账单区域 + 同步地址
    billingSection.style.display = 'block';
    syncShippingToBilling();
  } else {
    // 取消状态：显示账单区域 + 清空内容
    billingSection.style.display = 'block';
    clearBillingFields();
  }
}

// 页面加载完成后初始化
window.addEventListener('load', () => {
  // 默认已勾选，直接执行同步
  handleCheckboxToggle();
  // 绑定复选框切换事件
  shipToBillCheckbox.addEventListener('change', handleCheckboxToggle);
});

关键修改说明 #

1. 唯一ID：给所有元素加上shipping-/billing-前缀，彻底解决DOM选择冲突问题。
2. 规范事件绑定：用addEventListener替代老旧的onkeyup属性绑定，事件管理更灵活。
3. 明确字段同步范围：排除邮箱字段，避免循环索引错误，同时支持下拉框的同步。
4. 默认状态设置：直接在HTML中给复选框加checked属性，页面加载时自动生效。
5. DOM加载时机：用window.addEventListener('load', ...)确保代码在DOM完全渲染后执行，避免元素获取失败。

内容的提问来源于stack exchange，提问作者Carolyn