如何隐藏按钮直至三个Fieldset复选框组各至少选中1项？

实现方案 #

修改思路 #

• 给碳水、脂肪类的所有复选框也绑定点击事件监听
• 替换原来仅校验蛋白质类的逻辑，新增统一的校验函数，每次点击复选框时同时校验三类是否均存在至少1个选中项
• 校验通过时显示按钮，未通过时自动隐藏按钮（支持用户取消选中后重新隐藏的回退场景）

完整修改后的JavaScript代码 #

// 获取生成餐单的按钮元素
let generateMealButton = document.getElementById("generate-meals");
// 默认隐藏按钮
generateMealButton.classList.add("hide");
// 绑定按钮点击事件
generateMealButton.addEventListener("click", runMealGenerator);

// 获取三类食物的所有复选框
// 这里优化了选择器写法，用类选择器替代属性精确匹配，避免元素有多个类时选择失效
const proteinInputs = document.querySelectorAll("input.protein-input");
const carbInputs = document.querySelectorAll("input.carb-input");
const fatInputs = document.querySelectorAll("input.fat-input");

// 统一校验三类是否都有选中项的函数
function checkAllGroupsSelected() {
  // 校验蛋白质组是否有选中项：some方法只要有一个元素满足条件就返回true
  const hasProteinSelected = Array.from(proteinInputs).some(input => input.checked);
  // 校验碳水组是否有选中项
  const hasCarbSelected = Array.from(carbInputs).some(input => input.checked);
  // 校验脂肪组是否有选中项
  const hasFatSelected = Array.from(fatInputs).some(input => input.checked);

  // 三类都有选中则显示按钮，否则保持/恢复隐藏
  if (hasProteinSelected && hasCarbSelected && hasFatSelected) {
    generateMealButton.classList.remove("hide");
  } else {
    generateMealButton.classList.add("hide");
  }
}

// 给所有三类复选框绑定点击监听
proteinInputs.forEach((input) => {
  input.addEventListener("click", checkAllGroupsSelected);
});
carbInputs.forEach((input) => {
  input.addEventListener("click", checkAllGroupsSelected);
});
fatInputs.forEach((input) => {
  input.addEventListener("click", checkAllGroupsSelected);
});

function runMealGenerator() {
  console.log("Dummy Function Added")
}

逻辑说明 #

Array.from()用于把querySelectorAll返回的类数组节点集合转为标准数组，才能调用数组的some()方法完成选中状态的批量判断。

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