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

news/2024/10/15 21:48:43/

验证每个单选题是否都已经选择,其中每个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>


http://www.ppmy.cn/news/1539629.html

相关文章

Java面经--JVM篇

前言&#xff1a;资料由本人从网上寻找加上本人的个人理解进行编写总结&#xff0c;为的就是帮助自己快速掌握知识点&#xff0c;如有疑问或错误的点&#xff0c;欢迎评论区留言或者私信。 1.什么是JVM&#xff1f; JVM即Java虚拟机&#xff08;Java Virtual Machine&#xff0…

Flash Attention:高效注意力机制的突破

近年来&#xff0c;注意力机制(Attention)已成为自然语言处理和深度学习领域的重要工具。然而&#xff0c;传统的注意力实现在处理长序列时存在计算和内存效率低下的问题。为了解决这一挑战&#xff0c;研究者们提出了Flash Attention&#xff0c;一种快速、内存高效的注意力算…

使用 `fork()` 和 `waitpid()` 进行进程管理的详解

使用 fork() 和 waitpid() 进行进程管理的详解 在 C/C 编程中&#xff0c;fork() 和 waitpid() 是处理进程创建和管理的关键函数。本文将深入探讨 fork() 的用法、参数解析、wait() 和 waitpid() 的区别&#xff0c;以及如何正确获取子进程的退出状态。 1. fork() 函数概述 …

单链表算法题(一)(超详细版)

前言 : 通过算法题 &#xff0c; 学习解决问题的思路 &#xff0c; 再面对类似的算法题时 &#xff0c; 能快速定位解决方案 一 . 移除链表元素 移除链表元素 : . - 力扣&#xff08;LeetCode&#xff09; 思路一 &#xff1a; 通过遍历链表找到值为val 的结点 &#xff0c; …

应急响应:DHCP$DNS劫持实战

目录 DHCP DHCP安全性&#xff1a; DHCP常见的攻击手段&#xff1a; DNS DNS常见的攻击方式&#xff1a; DNS&DHCP攻击实战演练&#xff1a; 环境配置&#xff1a; 利用&#xff1a; 排查&#xff1a; 防御&#xff1a; DHCP 介绍&#xff1a; DHCP&#xff08;…

【代码随想录Day43】动态规划Part11

1143.最长公共子序列 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;动态规划子序列问题经典题目 | LeetCode&#xff1a;1143.最长公共子序列_哔哩哔哩_bilibili class Solution {public int longestCommonSubsequence(String text1, String text2) {// 将输…

使用three.js 实现蜡烛效果

使用three.js 实现蜡烛效果 import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"var scene new THREE.Scene(); var camera new THREE.PerspectiveCamera(60, window.innerWidth / window.in…

香港大学神作 LightRAG 横空出世!AI 检索生成系统革命,秒懂复杂信息,动态数据无所遁形!

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; 微信订阅号&#xff5c;搜一搜&…