用js jQuery 判断复选框文本框不能为空

最新推荐文章于 2020-07-24 21:11:31 发布

暗_涌

最新推荐文章于 2020-07-24 21:11:31 发布

阅读量3.4k

点赞数 3

分类专栏： JSJQuery 文章标签： Js JQuery 复选框不能为空

本文链接：https://blog.csdn.net/weixin_38007235/article/details/79594055

版权

JSJQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先弄得是简单的注册界面

<!DOCTYPE html>
<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">
			 	南京信息工程大学
			 </div>
			  <div class="dvBody">
			  	 <div class="section">
			  	 	 <label>
			  	 	 	用户名
			  	 	 </label>
			  	 	  <input type="text"  id="userName" placeholder="请输入用户名"/>
			  	 	
			  	 </div>
			  	  <div class="section">
			  	 	 <label>
			  	 	 	密码
			  	 	 </label>
			  	 	  <input type="text"   placeholder="请输入密码"  />
			  	 </div>
			  	 
			  	  <div class="section">
			  	 	 <label>
			  	 	 	性别
			  	 	 </label>
			  	 	 <span>男</span>
			  	 	 <input type="radio" class ="sex"   class="sex" />
			  	 	 
			  	 	 <span>女</span>
			  	 	 <input type="radio" class="sex"  class="sex" />
			  	 </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="js/jquery-3.3.1.min.js" ></script>
		 <script>
		 	$(function(){
		 		$(".btnReg").click(function(){
		 			//获取用户名的值
		 			var username= $("#userName").val();
		 			if(username==""){
		 				alert('用户名不能为空');
		 				return ;
		 			}
		 			
		 			var istrue=false;
		 			var  sex=$(".sex");
		 			for(var i=0;i<sex.length;i++){
		 				if(sex.eq(i).prop("checked")){
		 					istrue=true;
		 					break;
		 				}	
		 			}
		 			if(!istrue){
		 				 alert('必须选择性别');
		 				 return;	
		 			}
		 			
		 			if($(".hobby:checked").length==0){
		 				alert('必须选择爱好');
		 				return;
		 			}
		 			alert('验证成功');
		 		})
		 	});
		 </script>
		
	</body>
</html>

上面是用 JQuery来做

 一种是用循环  var istrue=false; var sex=$(".sex");//获取sex的JQuery对象 循环遍历   sex.eq(i).prop("checked")

一种是用获取checked的数量如果为0 则都没选所以提示 $(".hobby:checked").length==0

如果没有class 可以就用name去做 $("input[name=hobby]:checked").length

也可以JS去做比如性别选择不能为空

var str =document.getElementByName("sex");

var obj =str.length;

var flag =false;

for(i=0;i<obj;i++){

if(str[i].checked==true) flag=true;

}

if(!flag){

alert("性别不能为空");

return;

}

暗_涌

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
用js jQuery 判断复选框文本框不能为空

先弄得是简单的注册界面&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding: 0px; margin: 0px; }
复制链接

扫一扫