【前端】JQ验证每个单选按钮是否已经选择
验证每个单选题是否都已经选择，其中每个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>