单选按钮radio未遵循required属性规则 功能失效问题排查

你的代码有3个核心错误，直接导致功能失效：

• 元素选择器匹配失败：HTML里的单选输入框没有设置class="radioTOS"属性，document.querySelector(".radioTOS")无法选中目标元素，会返回null，后续属性访问直接报错。
• 校验逻辑完全写反：radio.checked的返回值是布尔类型，选中为true、未选中为false，永远不会等于null，你的判断条件永远不会进入提交成功的分支；且逻辑倒置，只有选中条款时才应该允许提交成功，你当前的判断条件是未选中时走成功逻辑。
• 原生required规则失效：你在submit事件触发第一行就执行了e.preventDefault()，直接阻断了浏览器原生表单校验的默认提示流程；另外单选项的required校验本身设计是针对同name的单选组，单个单选框的场景下原生校验兼容性和交互都不符合条款确认的需求。

1. 调整HTML结构 #

条款同意场景建议用语义更合适的复选框（单选框适用于多选项择一场景），同时关联label扩大点击区域：

<div class="radio">
    <input type="checkbox" name="tosCheck" id="tosCheck" class="tosCheck" required>
    <label for="tosCheck">我已阅读并同意相关条款</label>
</div>

如果你坚持用单选框，只要给input补上对应class即可：

<div class="radio">
    <input type="radio" name="radioTOS" class="radioTOS" id="radioTOS" required>
    <label for="radioTOS">Accept</label>
</div>

2. 修正JS逻辑 #

先确保所有元素都被正确获取，再调整判断逻辑：

// 提前获取所有需要操作的元素，确认选择器和元素属性匹配
const radio = document.querySelector(".tosCheck"); // 如果用单选框就改回.radioTOS
const payment = document.querySelector("#paymentForm"); // 替换为你实际的表单选择器
const confirmBtn = document.querySelector("#confirmBtn");
const checkout = document.querySelector("#checkoutTip");

payment.addEventListener("submit", (e) => {
    // 未选中条款时直接拦截提交
    if (!radio.checked) {
        e.preventDefault();
        console.log("请先勾选同意相关条款");
        return;
    }
    // 选中后执行提交成功逻辑
    e.preventDefault();
    confirmBtn.style.display = 'none';
    checkout.innerHTML = 'Booked!'
})

• 条款同意场景优先用复选框，符合用户普遍交互认知，原生required校验也能正常生效
• 元素获取后建议加非空判断，避免因为DOM结构调整导致的脚本报错
• 如果需要自定义错误提示，可以去掉input上的required属性，完全靠JS控制校验逻辑，避免原生提示和自定义提示冲突

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