如何在JavaScript中实现单选按钮值与文本框值相乘？

嘿，别着急！我给你写了一个完整的可运行示例，同时会拆解每个部分的逻辑，帮你搞清楚之前可能踩的坑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>乘法计算表单</title>
</head>
<body>
    <form id="calcForm">
        <!-- 单选按钮组：name属性必须一致，才能实现互斥选择 -->
        <div>
            <label><input type="radio" name="multiplier" value="2"> 乘以2</label>
            <label><input type="radio" name="multiplier" value="3"> 乘以3</label>
            <label><input type="radio" name="multiplier" value="4"> 乘以4</label>
            <label><input type="radio" name="multiplier" value="5"> 乘以5</label>
            <label><input type="radio" name="multiplier" value="6"> 乘以6</label>
        </div>

        <!-- 数字输入框：设置type为number，限制输入类型 -->
        <div>
            <label>输入数字：<input type="number" id="numberInput" placeholder="请输入数字"></label>
        </div>

        <!-- 计算按钮 -->
        <button type="button" id="calcBtn">计算结果</button>

        <!-- 显示结果的区域 -->
        <div id="resultArea" style="margin-top: 10px;"></div>
    </form>

    <script>
        // 获取按钮元素
        const calcBtn = document.getElementById('calcBtn');
        // 获取结果显示区域
        const resultArea = document.getElementById('resultArea');

        // 给按钮添加点击事件监听
        calcBtn.addEventListener('click', function() {
            // 1. 获取选中的单选按钮
            const selectedRadio = document.querySelector('input[name="multiplier"]:checked');
            // 2. 获取输入框的数值
            const inputNumber = document.getElementById('numberInput').value;

            // 先做验证：检查是否选中了单选按钮，以及输入是否有效
            if (!selectedRadio) {
                resultArea.textContent = '*请先选择一个乘法系数！';
                return;
            }
            if (!inputNumber || isNaN(Number(inputNumber))) {
                resultArea.textContent = '*请输入有效的数字！';
                return;
            }

            // 3. 转换为数字并计算
            const multiplier = Number(selectedRadio.value);
            const num = Number(inputNumber);
            const result = multiplier * num;

            // 4. 显示结果
            resultArea.textContent = `计算结果：${num} × ${multiplier} = ${result}`;
        });
    </script>
</body>
</html>

关键知识点拆解： #

• 单选按钮组的核心要求：所有单选按钮的name属性必须完全相同，这样浏览器才会把它们识别为同一组，实现“选了一个就不能选另一个”的互斥效果，这是很多新手容易忽略的点！
• 获取选中的单选按钮：用document.querySelector('input[name="multiplier"]:checked')可以精准定位到被选中的那个单选，checked是单选按钮的状态选择器。
• 类型转换很重要：表单元素的value默认是字符串类型，所以必须用Number()把它转成数字，否则直接相乘会变成字符串拼接（比如输入"2"和单选值"3"，会得到"23"而不是6）。
• 添加验证逻辑：避免用户没选单选或者输入非数字的情况，给用户清晰的提示，提升体验。

你可以把这段代码复制到HTML文件里直接运行测试，要是还有哪里不明白，随时问我~

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