jquery获取表单

最新推荐文章于 2022-08-15 20:33:45 发布

LZF丿码

最新推荐文章于 2022-08-15 20:33:45 发布

阅读量352

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45731129/article/details/126350321

版权

本文介绍了如何利用jQuery库高效地获取HTML表单中的数据，包括表单元素的选取、值的读取以及简单的测试效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery获取表单

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery获取表单作业</title>
	<link rel="stylesheet" href="css/作业.css">
	<script src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#submit").click(function(){
				var username = $("#userName").val();
				var pwd = $("#pwd").val();
				var sex = $("#sex:checked").val();
				var hobby = $("input[name=hobby]:checked");
				var star = $("#star").val();
				var remark = $("#remark").val();
				
				var hobbys = [];
				for (var i = 0; i < hobby.length; i++) {
					hobbys[i] = $(hobby[i]).val();
				}
				var json = {
					"username":username,
					"pwd":pwd,
					"sex":sex,
					"star":star,
					"remark":remark,
					"hobbys":hobbys
				};
				jsonStr = JSON.stringify(json);
				console.log(jsonStr);
			});
		});
	</script>
</head>

<body>
    <div class="top">
        <span>位置：</span>
        <ul class="topul">
            <li>首页</li>
            <li>></li>
            <li>表单</li>
			<li>></li>
			<li>@林滋凡</li>
        </ul>
    </div>
    <div class="main">
        <div class="main_title">
            <span>注册信息</span>
        </div>
        <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" <input type="password" id="pwd"
                        name="pwd" class="content_input" placeholder="请输入密码" />
                </li>
                <li>
                    <label>性别</label>
                    <input type="radio" id="sex" name="sex" value="yes" checked/>男
                    &nbsp;&nbsp;&nbsp;
                    <input type="radio" id="sex" name="sex" value="no" />女
                </li>
                <li>
                    <label>爱好</label>
                    <input type="checkbox" id="hobby" name="hobby" value="sing" />唱歌
                    &nbsp;&nbsp;&nbsp;
                    <input type="checkbox" id="hobby" name="hobby" value="dance" />跳
                    舞&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" id="hobby" name="hobby" value="football" />
                    足球
                </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>&nbsp;</label>
                    <input type="button" name="submit" id="submit" value="注 册" />
                </li>
            </ul>
        </div>
    </div>
</body>

</html代码片

测试效果：
在这里插入图片描述