【前端】JQ验证每个单选按钮是否已经选择

最新推荐文章于 2025-06-05 16:04:16 发布

原创最新推荐文章于 2025-06-05 16:04:16 发布

· 446 阅读

0 ·

版权

文章标签：

#前端

前端技术专栏收录该内容

73 篇文章

订阅专栏

验证每个单选题是否都已经选择，其中每个input中不带name值，直接遍历input[type="radio"]验证

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  
    <div class="formdiv">  
        <form class="layui-form" action="">  
            <div class="layui-form-item">  
                <div class="tt">1 您是否经常按医生的指导服用药物？ <span style="color:red">*</span></div>  
                <div>  
                    <label><input type="radio" value="A"> A. 是</label>  
                    <label><input type="radio" value="B"> B. 否</label>  
                </div>  
            </div>  
            <div class="layui-form-item">  
                <div class="tt">2 在过去的一周中，您是否曾经忘记过服用药物？ <span style="color:red">*</span></div>  
                <div>  
                    <label><input type="radio" value="A"> A. 是</label>  
                    <label><input type="radio" value="B"> B. 否</label>  
                </div>  
            </div>  
            <div class="layui-form-item">  
                <div class="tt">3 如果您觉得不太舒服，您是否会省略服药？ <span style="color:red">*</span></div>  
                <div>  
                    <label><input type="radio" value="A"> A. 是</label>  
                    <label><input type="radio" value="B"> B. 否</label>  
                </div>  
            </div>  
  
            <div style="margin:0.5rem auto 1rem auto;box-sizing: border-box;padding: 0rem 0.5rem;">  
                <button type="submit" class="layui-btn sub">提交问卷</button>  
            </div>  
        </form>  
    </div>  
  
    <script>  
        $(document).ready(function() {  
            $('.layui-form').on('submit', function(e) {  
                e.preventDefault(); // 阻止表单的默认提交行为  
  
                // 检查每个单选按钮组是否有一个被选中  
                var isValid = true;  
  
                $('input[type="radio"]').each(function() {  
                    if (!$(this).closest('.layui-form-item').find('input[type="radio"]:checked').length) {  
                        isValid = false;  
                        alert('请回答所有问题！');  
                        return false; // 跳出循环  
                    }  
                });  
  
                if (isValid) {  
                    // 如果所有验证都通过，则提交表单（这里只是模拟，你可以使用ajax提交或其他方式）  
                    alert('表单提交成功！');  
                    // $(this).submit(); // 取消注释以实际提交表单  
                }  
            });  
        });  
    </script>  
</body>  
</html>