如何用JavaScript实现复选框选中数组创建与正确组合比对

先修正HTML的小问题 #

你提供的HTML里第五个复选框的id属性少了开头的引号，修正后代码如下：

<section class="draggable-items">
    <div class="check-tool">
        <input type="checkbox"  class="checkbox-tool" name="tool" id="SBD710" value="SBD710">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SCS220" value="SCS220">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SB201" value="SB201">
        <img  class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SB204" value="SB204">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SBG700" value="SBG700">
        <img  class="draggable correct" draggable="true" src="img-game/WOOD/SBG700.png">
    </div>
</section>
<button id="check" class="btn">Construye</button>

一、用push方法创建选中项数组 #

核心逻辑是：点击按钮时遍历所有复选框，将勾选状态的复选框value存入数组。

实现代码：

// 获取按钮和所有复选框元素
const checkBtn = document.getElementById('check');
const checkboxes = document.querySelectorAll('.checkbox-tool');

checkBtn.addEventListener('click', function() {
    const selectedItems = [];
    
    // 遍历每个复选框，筛选勾选项
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            // 用push把选中项的value加入数组
            selectedItems.push(checkbox.value);
        }
    });
    
    console.log('当前选中项:', selectedItems);
    // 调用比对逻辑
    compareArrays(selectedItems);
});

二、实现与正确组合数组的比对逻辑 #

首先预设你的正确组合数组（比如const correctCombination = ['SBD710', 'SB201'];，根据游戏需求调整），比对需要满足两个核心条件：选中数组长度和正确数组一致，且所有元素完全匹配（不考虑顺序）。

方法1：排序后逐位比对 #

将两个数组排序后逐个元素对比，兼容用户任意勾选顺序：

function compareArrays(selected) {
    // 替换为你的正确组合
    const correctCombination = ['SBD710', 'SB201'];
    // 复制数组并排序，避免修改原数组
    const sortedSelected = [...selected].sort();
    const sortedCorrect = [...correctCombination].sort();
    
    let isCorrect = true;
    // 先判断长度是否一致
    if (sortedSelected.length !== sortedCorrect.length) {
        isCorrect = false;
    } else {
        // 逐位对比元素
        for (let i = 0; i < sortedSelected.length; i++) {
            if (sortedSelected[i] !== sortedCorrect[i]) {
                isCorrect = false;
                break;
            }
        }
    }
    
    // 给出用户反馈
    if (isCorrect) {
        alert('组合正确！');
    } else {
        alert('组合错误，请重新选择！');
    }
}

方法2：用every和includes快速判断 #

更简洁的写法，通过双向判断确保元素完全匹配：

function compareArrays(selected) {
    const correctCombination = ['SBD710', 'SB201']; // 替换为你的正确组合
    
    const isCorrect = selected.length === correctCombination.length &&
                      // 选中项都在正确数组里
                      selected.every(item => correctCombination.includes(item)) &&
                      // 正确数组的项都被选中
                      correctCombination.every(item => selected.includes(item));
    
    // 给出用户反馈
    if (isCorrect) {
        alert('组合正确！');
    } else {
        alert('组合错误，请重新选择！');
    }
}

完整代码整合 #

将JavaScript代码放到HTML的<script>标签中（建议放在</body>前），即可直接运行：

<!-- 你的HTML代码 -->
<script>
const checkBtn = document.getElementById('check');
const checkboxes = document.querySelectorAll('.checkbox-tool');

checkBtn.addEventListener('click', function() {
    const selectedItems = [];
    
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            selectedItems.push(checkbox.value);
        }
    });
    
    compareArrays(selectedItems);
});

function compareArrays(selected) {
    const correctCombination = ['SBD710', 'SB201']; // 自定义正确组合
    const sortedSelected = [...selected].sort();
    const sortedCorrect = [...correctCombination].sort();
    
    let isCorrect = true;
    if (sortedSelected.length !== sortedCorrect.length) {
        isCorrect = false;
    } else {
        for (let i = 0; i < sortedSelected.length; i++) {
            if (sortedSelected[i] !== sortedCorrect[i]) {
                isCorrect = false;
                break;
            }
        }
    }
    
    if (isCorrect) {
        alert('组合正确！');
    } else {
        alert('组合错误，请重新选择！');
    }
}
</script>

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