代码来源于此微博
https://blog.csdn.net/weixin_38007235/article/details/79594055#commentsedit
版权声明:本文为CSDN博主「暗_涌」的原创文章,遵循 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>
checkbox部分(我当时是想了解这里的)
获取checked的数量 如果为0 则都没选 :
if($(".hobby:checked").length==0){
alert('必须选择爱好');
return;
}
如果没有class 可以就用name去做 $(“input[name=hobby]:checked”).length