如何通过复选框ID匹配同名变量传入函数，解决undefined问题

你的核心问题是：代码把选中复选框的ID拼接成单一字符串传给myFunction，导致函数无法识别为对应变量，最终返回undefined。要实现随机返回选中复选框对应变量值的效果，需要调整参数传递逻辑，同时规范变量存储方式。

关键修改点 #

1. 用对象存储变量映射：把原来独立的mLine、hLine、pLine变量放到一个对象中，通过复选框ID作为键快速获取对应值，比直接使用全局变量更清晰规范。
2. 传递变量值而非ID字符串：处理选中复选框时，直接映射到对应的值，而非拼接ID字符串。
3. 展开数组作为函数参数：用ES6展开运算符...把值数组的每个元素作为单独参数传入myFunction，让函数的arguments对象能拿到多个可选值。
4. 修复HTML标签错误：原来的<button id="result">标签结尾误用了</div>，需修正为</button>。

完整测试代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>

    <form>
        <input type="checkbox" id="mLine" value="mLine">
        <input type="checkbox" id="hLine" value="hLine">
        <input type="checkbox" id="pLine" value="pLine">
        <button type="submit" value="send">Submit</button>
    </form>

    <button id="result">
        test
    </button>

    <script>
        // 用对象存储ID和对应值的映射
        const lineValues = {
            mLine: "test1",
            hLine: "test2",
            pLine: "test3"
        }

        const qna = document.getElementById('result')
        const form = document.querySelector('form');

        function myFunction() {
            // 无选中项时直接返回，避免报错
            if (arguments.length === 0) return;
            const arg = arguments[Math.floor(Math.random() * arguments.length)]
            qna.innerHTML = arg
        }

        form.addEventListener('submit', e => {
            e.preventDefault();

            // 获取选中复选框对应的变量值数组
            const selectedValues = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
                .map(item => lineValues[item.id]);
            
            // 用展开运算符把数组元素作为单独参数传入
            myFunction(...selectedValues)
        });

    </script>
    
</body>
</html>

效果说明 #

选中一个或多个复选框并点击Submit按钮时，myFunction会从选中项对应的变量值中随机挑选一个，显示在id="result"的按钮上；若未选中任何复选框，函数会直接返回，避免出现错误。

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