如何实现检查两组复选框均未勾选时阻止表单提交？

首先看你现有的EmptyFields函数存在几个关键问题：

• 误用赋值运算符=代替比较运算符===，这会把false强制赋值给复选框的checked属性，而非判断是否未勾选
• 嵌套循环的逻辑混乱，只要第一组有一个未勾选的复选框就会进入第二组判断，无法正确检测"两组都无选中项"的场景

修正后的完整代码 #

首先确保你已正确获取两组复选框的DOM元素（如果之前没做这一步，需要补充）：

// 先获取两组复选框元素
const checkboxDofMElement = document.querySelectorAll('.checkboxDofM');
const checkboxDayElement = document.querySelectorAll('.checkboxDay');

// 你已实现的互斥禁用函数保持不变
function DaysBlocker() {
    checkboxDayElement.forEach(function (item) {
        item.disabled = false;
    });
    checkboxDofMElement.forEach(function (item) {
        if (item.checked) {
            checkboxDayElement.forEach(function (item2) {
                item2.disabled = true;
            });
        }
    });
}

function DofmBlocker() {
    checkboxDofMElement.forEach(function (a) {
        a.disabled = false;
    });
    checkboxDayElement.forEach(function (a) {
        if (a.checked) {
            checkboxDofMElement.forEach(function (b) {
                b.disabled = true;
            });
        }
    });
}

// 修正后的EmptyFields函数
function EmptyFields() {
    // 检查第一组是否有选中项
    const hasDofMChecked = Array.from(checkboxDofMElement).some(item => item.checked);
    // 检查第二组是否有选中项
    const hasDayChecked = Array.from(checkboxDayElement).some(item => item.checked);

    // 若两组均无选中项，提示并阻止提交
    if (!hasDofMChecked && !hasDayChecked) {
        alert("You have to select either a day(s) of the month or a day(s) of the week");
        return false;
    }
    // 有选中项则允许提交
    return true;
}

关键修正点说明 #

1. 正确获取DOM元素：用document.querySelectorAll('.checkboxDofM')精准获取所有类名为checkboxDofM的复选框，同理处理checkboxDay组
2. 高效判断选中状态：
   • Array.from()把DOM节点列表转为数组，方便使用数组方法
   • some()方法会遍历数组，只要有一个元素满足item.checked为true就返回true，能高效判断组内是否有选中项
3. 清晰的逻辑判断：直接判断"两组都无选中项"的场景，符合需求逻辑
4. 正确控制提交行为：仅在两组都未选中时返回false阻止提交，其他情况返回true允许表单提交

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