如何判断onclick绑定的Monthly()/Annual()触发状态 实现支付金额输入框条件展示

原代码的核心问题是两个函数各自独立操作元素显示状态，没有读取复选框的真实勾选值，导致两个选项同时勾选时，后触发的函数会覆盖前一个的展示逻辑，无法触发合计金额输入框的展示。

调整思路 #

• 废弃通过style.display判断勾选状态的写法，直接读取复选框的原生checked属性，这个值永远对应用户的实际勾选操作，不会出现状态不同步
• 把所有展示判断的逻辑抽到同一个公共函数中，无论触发月度还是年度的勾选事件，都执行一次全量状态计算，避免逻辑分散导致的状态覆盖
• 提前定义所有需要隐藏的元素的默认状态，再根据两个复选框的组合值匹配需要展示的金额框

状态匹配规则 #

• 月度+年度复选框同时勾选：展示payment_950合计输入框，隐藏其余两个金额框
• 仅勾选月度复选框：展示payment_750输入框，隐藏其余两个
• 仅勾选年度复选框：展示payment_200输入框，隐藏其余两个
• 两个复选框都未勾选：三个金额输入框全部隐藏

可直接替换的代码 #

// 统一计算并更新金额输入框的展示状态
function refreshPaymentInputs() {
  // 获取复选框真实勾选状态
  const selectMonthly = document.getElementById('monthly').checked;
  const selectAnnual = document.getElementById('annual').checked;
  // 绑定所有金额输入框元素
  const inputMonthlyOnly = document.getElementById('payment_750');
  const inputAnnualOnly = document.getElementById('payment_200');
  const inputCombined = document.getElementById('payment_950');

  // 默认隐藏所有金额输入框
  inputMonthlyOnly.style.display = 'none';
  inputAnnualOnly.style.display = 'none';
  inputCombined.style.display = 'none';

  // 按勾选组合展示对应输入框
  if (selectMonthly && selectAnnual) {
    inputCombined.style.display = 'block';
  } else if (selectMonthly) {
    inputMonthlyOnly.style.display = 'block';
  } else if (selectAnnual) {
    inputAnnualOnly.style.display = 'block';
  }
}

// 复选框触发时调用统一刷新逻辑
function Monthly() {
  refreshPaymentInputs();
}

function Annual() {
  refreshPaymentInputs();
}

HTML部分保持原结构即可 #

不需要修改原有复选框、金额输入框的代码，只要保留onclick事件绑定的函数调用，逻辑就可以正常运行。

额外优化提示：如果后续表单需要提交选择结果，可直接读取两个复选框的checked值判断组合选项，不需要再通过遍历DOM样式反推用户选择的内容，逻辑更可靠。

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