https://blog.csdn.net/weixin_38007235/article/details/79594055#commentsedit 版权声明：本文为博主「暗_涌」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_38007235/article/details/79594055
我已经获得人家的许可了。我只是加上我的一点理解。为了以后用上方面看。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ padding: 0px; margin: 0px; } body{ background-color: #efefef; } .dvlogin{ width: 600px; height: 480px; position: absolute; top: 50%; left: 50%; /*外边距 （上，右，下，左）*/ margin: -240px 0px 0px -300px; /* box-shadow表示阴影 四个参数分别表示 水平偏移的距离，垂直偏移的距离，阴影的半径，阴影的颜色*/ box-shadow: 0px 0px 20px rgb(30, 93, 151); background-color: white; } /* 登录头部样式*/ .dvHeader{ height: 30px; line-height: 30px; border-bottom: 1px solid #cdcdcd; padding: 10px; font-weight: bold; } /*登录身体的样式*/ .dvBody{ width: 400px; padding: 70px 50px 0px 50px; margin: 0px auto; } .section{ height: 55px; } .section label{ /*行级元素变为块级元素*/ display: block; width: 100px; float: left; text-align: right; margin-right: 10px; font-size: 13px; line-height: 25px; } .section span{ font-size: 14px; } .section input[type='text']{ width: 200px; height: 25px; line-height: 25px; border: 1px solid #CDCDCD; } /*登录按钮的样式*/ .btnReg{ width: 150px; height: 30px; line-height: 30px; background-color: rgb(30, 93, 151); border: none; color: white; margin-left: 120px; cursor: pointer; transition:all 5s; } /*鼠标移动上去的样式*/ .btnReg:hover{ background-color: green; } </style> </head> <body> <div class="dvlogin"> <!-- 作者：offline 时间：2016-02-27 描述： 页面的头部 --> <div class="dvHeader"> <!-- head --> 南京信息工程大学 </div> <div class="dvBody"><!-- body--> <div class="section"> <label> 用户名 </label> <input type="text" id="userName" placeholder="请输入用户名"/> </div> <div class="section"> <label> 密码 </label> <input type="text" id="password" placeholder="请输入密码" /> </div> <div class="section"> <label> 性别 </label> <span>男</span> <input type="radio" class ="sex" name="sex" /> <span>女</span> <input type="radio" class="sex" name="sex" /> <!--单选按钮： 必须得加上相同的name属性，不然能同时选中这个按钮--> </div> <div class="section"> <label> 爱好 </label> <span>王者荣耀</span> <input type="checkbox" name="hobby" class="hobby" /> <span>看NBA</span> <input type="checkbox" name="hobby" class="hobby" /> </div> <div class="section"> <input type="button" value="注册" class="btnReg" /> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script> <script> $(function(){ $(".btnReg").click(function(){ //获取用户名的值 var username= $("#userName").val(); if(username==""){ alert('用户名不能为空'); return ; } var password= $("#password").val(); if(password==""){ alert('密码不能为空'); return ; } var istrue=false; var sex=$(".sex"); for(var i=0;i<sex.length;i++){ if(sex.eq(0).prop("checked")){ alert('你选中的是男'); } if(sex.eq(1).prop("checked")){ alert('你选中的是女'); } /* 我还没有用过这些语法，我只就这个例子进行学习： class=sex不是有两个input type=radio嘛 按钮不论按了啥，var sex=$(".sex")调试的结果： sex = r.fn.init(2) [input.sex, input.sex, prevObject: r.fn.init(1)] */ if(sex.eq(i).prop("checked")){ istrue=true; break; } } if(!istrue){ alert('必须选择性别'); return; } if($(".hobby:checked").length==0){ alert('必须选择爱好'); return; } alert('验证成功'); }) }); </script> </body> </html>获取checked的数量 如果为0 则都没选 ：
if($(".hobby:checked").length==0){ alert('必须选择爱好'); return; }如果没有class 可以就用name去做 $(“input[name=hobby]:checked”).length
