JavaScript中复选框多选逻辑失效：如何判断双复选框选中状态？

你代码里的逻辑顺序搞反了——当同时选中peanuts和cashews时，第一个if (document.getElementById("peanuts").checked)就已经满足条件，代码直接进入这个分支执行，后面的所有else if都不会再触发，所以永远到不了"同时选两者"的逻辑。

1. 快速调整版 #

把多条件组合的判断放在单个条件的前面，先检查组合情况，再处理单个选中的场景：

function myFunction() {
    // 先判断同时选中花生和腰果的情况
    if (document.getElementById("peanuts").checked && document.getElementById("cashews").checked) {
        document.write("<p> You have selected Both. Here's a nut-free recipe:");
    } else if (document.getElementById("peanuts").checked) {
        document.write("<p> You have selected Peanuts. Here's a peanut-free recipe:");
    } else if (document.getElementById("cashews").checked) {
        document.write("<p> You have selected Cashews. Here's a cashew-free recipe:");
    } else if (document.getElementById("dairy").checked) {
        document.write("<p> You have selected Dairy. Here's a dairy-free recipe:");
    }
}

2. 扩展性优化版（推荐） #

考虑到你后续要扩展更多复选框，document.write会覆盖整个页面，而且判断逻辑会越来越臃肿，建议改用DOM元素更新内容，同时缓存复选框状态来简化逻辑：

修改后的HTML（新增结果展示容器）

<input type="checkbox" name="peanuts" id="peanuts" />Peanuts<br />
<input type="checkbox" name="cashews" id="cashews" />Cashews<br />
<input type="checkbox" name="dairy" id="dairy" />Dairy<br />
<button id="myButton" type="button" onclick="myFunction()">Get Value</button>
<!-- 专门用来展示结果的容器 -->
<div id="recipeResult"></div>

修改后的JavaScript

function myFunction() {
    const resultEl = document.getElementById("recipeResult");
    // 缓存复选框状态，避免重复查询DOM
    const hasPeanut = document.getElementById("peanuts").checked;
    const hasCashew = document.getElementById("cashews").checked;
    const hasDairy = document.getElementById("dairy").checked;

    // 优先处理组合逻辑
    if (hasPeanut && hasCashew) {
        resultEl.innerHTML = "<p> You have selected Both. Here's a nut-free recipe:";
    } 
    // 再处理单个限制逻辑
    else if (hasPeanut) {
        resultEl.innerHTML = "<p> You have selected Peanuts. Here's a peanut-free recipe:";
    } else if (hasCashew) {
        resultEl.innerHTML = "<p> You have selected Cashews. Here's a cashew-free recipe:";
    } else if (hasDairy) {
        resultEl.innerHTML = "<p> You have selected Dairy. Here's a dairy-free recipe:";
    } 
    // 未选中任何选项的提示
    else {
        resultEl.innerHTML = "<p> Please select at least one dietary restriction.";
    }
}

这个方案的优势：

• 不会覆盖整个页面，仅更新指定区域
• 缓存复选框状态，减少DOM查询开销
• 逻辑分层清晰，后续新增复选框或组合规则时，直接在对应位置添加判断即可

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