欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 艺术 > 【前端】JQ验证每个单选按钮是否已经选择

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

2024/10/24 21:35:40 来源:https://blog.csdn.net/qq_25285531/article/details/142877450  浏览:    关键词:【前端】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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com