如何在HTML/JS中保存radio单选框输入值并打印到屏幕

需求 #

保存radio单选输入框的选中值，将值打印到屏幕上，确认输入值已成功保存。

原有代码 #

原有JS逻辑 #

if (document.getElementById('a1').checked) {
    rate_value1 = document.getElementById('a1').value;
    document.writeln(rate_value1); 
}
if (document.getElementById('a2').checked) {
    rate_value2 = document.getElementById('a2').value;
    document.writeln(rate_value2); 
}
if (document.getElementById('a3').checked) {
    rate_value3 = document.getElementById('a3').value;
    document.writeln(rate_value3); 
}
if (document.getElementById('a4').checked) {
    rate_value4 = document.getElementById('a4').value;
    document.writeln(rate_value4); 
}
if (document.getElementById('a5').checked) {
    rate_value5 = document.getElementById('a5').value;
    document.writeln(rate_value5); 
}

原有HTML结构 #

<div class='input-form' id="div1">
    <h4 id="myText" contenteditable="true">Customize</h4>
    <input type="radio" name="rating" value="5" id="a5" ><label for="5">5</label>
    <input type="radio" name="rating" value="4" id="a4" ><label for="4">4</label>
    <input type="radio" name="rating" value="3" id="a3" ><label for="3">3</label>
    <input type="radio" name="rating" value="2" id="a2" ><label for="2">2</label>
    <input type="radio" name="rating" value="1" id="a1" ><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>

原有代码问题 #

• 逻辑冗余：同组单选框不需要逐个通过id判断选中状态，可直接通过name属性获取选中项
• 缺少触发时机：JS默认在页面加载时执行，此时用户还未完成选择，无法获取到有效值
• 输出方法不合理：document.writeln()在页面加载完成后调用会覆盖整个页面原有内容，不适合做结果提示
• 交互bug：label标签的for属性值和对应input的id不匹配，点击文字标签无法选中对应单选框

修正后完整代码 #

<div class='input-form' id="div1">
    <h4 id="myText" contenteditable="true">Customize</h4>
    <!-- 修正label的for属性与input id一一对应 -->
    <input type="radio" name="rating" value="5" id="a5" ><label for="a5">5</label>
    <input type="radio" name="rating" value="4" id="a4" ><label for="a4">4</label>
    <input type="radio" name="rating" value="3" id="a3" ><label for="a3">3</label>
    <input type="radio" name="rating" value="2" id="a2" ><label for="a2">2</label>
    <input type="radio" name="rating" value="1" id="a1" ><label for="a1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>
<!-- 新增独立结果显示区域，避免覆盖原有页面内容 -->
<p>当前选中的评分值：<span id="result"></span></p>

<script>
// 绑定按钮点击事件，用户操作后再执行取值逻辑
document.getElementById('but_add').addEventListener('click', function() {
    // 一行代码获取同名单选框的选中项，替代多段重复if判断
    const selectedRating = document.querySelector('input[name="rating"]:checked');
    const resultDom = document.getElementById('result');
    if (selectedRating) {
        // 将值存入变量，可直接用于后续接口提交、本地存储等保存逻辑
        const rateValue = selectedRating.value;
        // 输出到页面指定区域
        resultDom.textContent = rateValue;
        // 控制台打印方便调试校验
        console.log('已保存的选中值为：', rateValue);
    } else {
        resultDom.textContent = '未选择任何评分';
    }
})
</script>

实现说明 #

• 同组单选框统一通过选择器input[name="分组名"]:checked获取选中项，代码简洁易维护，后续增减单选选项不需要修改JS逻辑
• 取值逻辑绑定到按钮点击事件上，确保用户完成选择操作后才执行取值
• 用独立DOM节点显示结果，不会破坏原有页面结构
• 取值存入变量后，可直接对接后续的持久化存储、数据提交逻辑

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