【jquery】使用jquery获取表单数据，在控制台打印结果

表单样式

HTML代码

<div class="top"> <span>位置：</span>
			<ul class="topul">
				<li>首页</li>
				<li>­­--></li>
				<li>表单</li>
			</ul>
		</div>
		<div class="main">
			<div class="main_title"> 
			<span>注册信息</span> 
			</div>
			<form action="#" method="GET">
				<div class="main_body">
					<ul class="main_ul">
						<li><label>账号</label> <input type="text" id="userName" name="userName" class="content_input"
								placeholder="请输入账号" /> </li>
						<li><label>密码</label> <input type="password" id="pwd" name="pwd" class="content_input" 
								  placeholder="请输入密码" /> </li>
						<li><label>性别</label> <input type="radio"  name="sex" value="男"/>男
							&nbsp;&nbsp;&nbsp; <input type="radio"  name="sex" value="女" />女 </li>
						<li><label>爱好</label> <input type="checkbox"  name="hobby" value="唱歌" />唱歌
							&nbsp;&nbsp;&nbsp; <input type="checkbox"  name="hobby" value="跳舞" />跳
							舞&nbsp;&nbsp;&nbsp; <input type="checkbox"  name="hobby" value="足球" /> 足球 </li>
						<li><label>星座</label> <select id="star" name="star">
								<option value="白羊座">白羊座</option>
								<option value="水瓶座">水瓶座</option>
								<option value="巨蟹座">巨蟹座</option>
							</select> </li>
						<li><label>备注</label> <textarea id="remark" name="remark"></textarea> </li>
						<li><label>&nbsp;</label> <input type="submit" name="submit" id="submit" value="注 册" /> </li>
					</ul>
				</div>
			</form>

css代码

<style>
			.top{
				height: 40px;
				background-color: azure;
				position: relative;
			}
			
			.top span{
				float: left;
				line-height: 40px;
				margin-left: 12px;
				font-weight: bold;
			}
			
			.topul{
				margin: 0px;
				position: relative;
			}
			
			.topul li{
				float: left;
				list-style: none;
				line-height: 40px;
				margin-left: 7px;
				margin-right: 3px;
			}
			
			.main{
				margin: 10px 18px;
			}
			
			.main_title{
				border-bottom: 1px solid darkgray;
				margin-bottom: 28px;
				position: relative;
				height: 35px;
			}
			
			.main_title span{
				line-height: 30px;
				border-bottom: 3px solid aqua;
				font-weight: bold;
				font-size: 14px;
				position: absolute;
				bottom: -1px;
				padding: 0px 2px;
				height: 30px;
			}
			
			.main_ul{
				list-style: none;
			}
			
			.main_ul li{
				margin-bottom: 20px;
			}
			
			.main_ul li lable{
				width: 80px;
				display: inline-block;
				float: left;
				line-height: 30px;
				text-align: center;
			}
			
			.content_input{
				width: 340px;
				height: 30px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}
			
			textarea{
				width: 500px;
				height: 100px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}
			
			#sex{
				margin-top: 8px;
			}
			
			#hobby{
				margin-top: 8px;
			}
			
			#star{
				width: 160px;
				height: 30px;
				border: 1px solid #A9A9A9;
				border-radius: 5px;
			}
			
			#submit{
				background-color: darkturquoise;
				font-size: 14px;
				color: #ffffff;
				border: 0px;
				font-weight: bold;
				width: 100px;
				height: 30px;
				border-radius: 5%;
			}
			
		</style>

js代码，必须得引入jquery

<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#submit").click(function(){
					var userName=$("#userName").val();
					var pwd=$("#pwd").val();
					
					var sex;
					$("input[name='sex']:checked").each(function(){
						sex=$(this).val();						
					});
					
					var i=0;
					var hobby=[];
					$("input[name='hobby']:checked").each(function(){
						hobby[i]=$(this).val();
						i++;
					});
					
					var star;
					$("#star option:checked").each(function(){
						star=$(this).val();
					});
					
					var remark=$("#remark").val();
					
					var result={};
					result.userName=userName;
					result.pwd=pwd;
					result.sex=sex;
					result.hobby=hobby;
					result.star=star;
					result.remark=remark;
					console.log(JSON.stringify(result));
					return false;
				})	
			})
		</script>

效果图