<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.6.0.js"></script>
<script>
$(function(){// $(function(){});文档加载后执行此方法
$("#submit").click(function(){//获取按钮事件
var userName=$("#userName").val();//input的值存在value中jquery和Dom有一些区别
var pwd=$("#pwd").val();
var sex=$("input[name='sex']:checked").val();//$(:checked)返回的是checked为true的对象
var hobby=[];
var i=0;
$("input[name='hobby']:checked").each(function(){
hobby[i]=$(this).val();i++
});
var star =$("select[name='star']:checked").html();
var remark=$("#remark").val();
var reluts={};
reluts.userName=userName;
reluts.pwd=pwd;
reluts.sex=sex;
reluts.hobby=hobby;
reluts.star=star;
reluts.remark=remark;
console.log(reluts);
$("body").append(JSON.stringify(reluts));//这句是把获取的数据在浏览器显示就，就不用翻控制台
});
});
</script>
</head>
<body>
<div>
<ul>
<li>
<label>账号</label>
<input type="text" id="userName" name="userName" placeholder="请输入账号" />
</li>
<li>
<label>密码</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码" />
</li>
<li>
<label>性别</label>
<input type="radio" id="sex" name="sex" value="男" checked />男
<input type="radio" id="sex" name="sex" value="女" />女
</li>
<li>
<label>爱好</label>
<input type="checkbox" id="hobby" name="hobby" value="唱歌" />唱歌
<input type="checkbox" id="hobby" name="hobby" value="跳舞" />跳舞
<input type="checkbox" id="hobby" name="hobby" value="足球" />足球
</li>
<li>
<label>星座</label>
<select id="star" name="star">
<option value="1">双子座</option>
<option value="2">金牛座</option>
<option value="3">巨蟹座</option>
</select>
</li>
<li>
<label>备注</label>
<textarea id="remark" name="remark"></textarea>
</li>
<li>
<label> </label>
<input type="button" name="submit" id="submit" value="注 册" />
</li>
</ul>
</div>
</body>
</html>
