如何使用JavaScript编辑WordPress结账页实现单选按钮切换表单字段

问题修正及实现代码 #

你原有代码存在多处语法和逻辑错误，同时缺少事件绑定触发逻辑，以下是可直接使用的完整实现：

现有代码错误点 #

• 函数定义语法不合法，参数位不能直接写字符串字面量
• DOM查询方法拼写错误：getElementByClassName应为getElementsByClassName，该方法返回元素集合，需要遍历后才能修改样式
• 未给单选按钮绑定change事件，函数不会自动执行
• 字段显示隐藏逻辑写反，同时单选按钮值的获取方式错误

完整实现代码 #

// 等待DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取单选按钮元素
  const radioBtn = document.getElementById('radio-5984531736');
  // 获取两类字段元素
  const fizicaFields = document.getElementsByClassName('fizica');
  const juridicalFields = document.getElementsByClassName('juridical');

  // 定义切换字段显示的函数
  function toggleCheckoutFields() {
    if (radioBtn.value === "Persoana fizica") {
      // 选中A选项：显示fizica字段，隐藏juridical字段
      Array.from(fizicaFields).forEach(el => el.style.display = 'block');
      Array.from(juridicalFields).forEach(el => el.style.display = 'none');
    } else {
      // 选中B选项：显示juridical字段，隐藏fizica字段
      Array.from(fizicaFields).forEach(el => el.style.display = 'none');
      Array.from(juridicalFields).forEach(el => el.style.display = 'block');
    }
  }

  // 页面加载时先执行一次，匹配默认选中状态
  toggleCheckoutFields();
  // 给单选按钮绑定change事件，选中变化时触发切换
  radioBtn.addEventListener('change', toggleCheckoutFields);
});

WordPress部署说明 #

不要把脚本放在页面header中，避免DOM未加载完成导致获取元素失败，推荐两种部署方式：

1. 进入WordPress后台外观-自定义-自定义代码/自定义脚本区域，粘贴上述代码
2. 在结账页添加自定义HTML块，把代码放在<script>标签中，放到页面底部

效果示例 #

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