如何在事件循环外部访问存储单选框值的数组并通过AJAX提交至后端

Hey，我看了你的代码和问题，其实核心问题出在数组的处理方式和代码冗余上，咱们一步步来解决：

先说说你当前代码的问题 #

1. 数组越存越乱：你每次点击都用push()往数组里塞值，结果就是用户点一次加一次，重复点击后数组里全是重复项，完全不是当前选中的最新值。
2. "事件外拿不到值"的误解：你的数组是全局变量，其实事件外是能访问的，但要么你是页面一加载就读（那时候数组是空的），要么读的时候数组已经被塞了一堆重复值，自然不是你想要的结果。
3. 代码太重复：三组单选框的逻辑几乎一模一样，写三次不仅麻烦，以后改起来也头疼。

优化后的实现方案 #

咱们换个思路：不要提前把值存进数组，而是在需要提交AJAX的时候，实时去获取当前选中的单选框值，同时把重复的逻辑封装成通用函数，代码会简洁很多，也更可靠。

下面是优化后的代码：

// 封装个通用函数，专门拿指定name的单选框选中值
function getSelectedRadio(radioName) {
  const selectedItem = document.querySelector(`input[name="${radioName}"]:checked`);
  // 有选中项就返回值，没有就返回null
  return selectedItem ? selectedItem.value : null;
}

// 再封装个函数，处理单选组的点击显示逻辑
function setupRadioClickHandler(groupClass, targetElement, dataAttr) {
  const groupItems = document.getElementsByClassName(groupClass);
  for (let i = 0; i < groupItems.length; i++) {
    groupItems[i].addEventListener("click", () => {
      const isVisible = targetElement.getAttribute(dataAttr);
      if (isVisible === "false") {
        targetElement.setAttribute(dataAttr, true);
      }
    });
  }
}

// 初始化各个单选组的点击事件
const courtToggle = document.querySelector(".civil-court-ul");
const lawTypeToggle = document.querySelector(".civil-law-type-ul");

setupRadioClickHandler("civil-category", courtToggle, "data-courtvisilble");
setupRadioClickHandler("civil-court", lawTypeToggle, "data-lawtypevisible");

// 假设你有个提交按钮，点击时收集值并发送AJAX
document.querySelector("#submit-button").addEventListener("click", () => {
  // 实时获取当前所有选中的单选框值
  const formData = {
    civilCategory: getSelectedRadio("civil-cat"),
    civilCourt: getSelectedRadio("civil-court"),
    civilLawType: getSelectedRadio("civil-law-type")
  };

  // 这里用fetch发送AJAX，你也可以用XMLHttpRequest
  fetch("/your-backend-api-url", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(formData)
  })
  .then(res => res.json())
  .then(result => {
    console.log("提交成功！", result);
    // 这里可以加提交成功后的逻辑，比如提示用户
  })
  .catch(err => {
    console.error("提交出错了：", err);
  });
});

为什么这么做更好？ #

1. 永远拿到最新值：每次提交时才去获取当前选中的选项，完全不用担心用户中途改了选项但数组没更新的问题。
2. 代码更清爽：把重复的逻辑封装成函数，以后要加新的单选组，只需要调用一次函数就行，维护起来超方便。
3. 避免数组冗余：不用再纠结数组里的重复值，直接拿当前选中的单个值（毕竟单选框每组只能选一个嘛）。

如果你确实需要随时在事件外部访问这些值 #

那可以定义几个全局变量，然后监听单选框的change事件（比click更靠谱，因为用户可能用键盘切换选项）来更新变量：

// 全局变量存当前选中值
let currentCivilCat = null;
let currentCivilCourt = null;
let currentCivilLawType = null;

// 监听第一组单选框的change事件
const courtToggle = document.querySelector(".civil-court-ul");
document.querySelectorAll("input[name='civil-cat']").forEach(radio => {
  radio.addEventListener("change", () => {
    currentCivilCat = radio.value;
    // 顺便处理显示court区域的逻辑
    const visibility = courtToggle.getAttribute("data-courtvisilble");
    if (visibility === "false") {
      courtToggle.setAttribute("data-courtvisilble", true);
    }
  });
});

// 同理处理另外两组单选框...

// 现在在代码的任何地方都能访问currentCivilCat这些变量，拿到最新的选中值
console.log(currentCivilCat); // 用户选过之后就会有值

用change事件比click好的地方在于，用户用键盘（比如Tab+空格）切换单选框时，click事件不会触发，但change事件会，能保证变量实时更新。

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