用jQuery得到form表单里面文本框、密码框、单选框、下拉框、复选框的值

最新推荐文章于 2023-02-12 00:33:31 发布

lisha102

最新推荐文章于 2023-02-12 00:33:31 发布

阅读量1.5k

点赞数 2

分类专栏： jQuery html 文章标签： jquery中获取表单里面的值 html

本文链接：https://blog.csdn.net/qq_34051078/article/details/68927743

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过jQuery获取表单的值</title>
<script type="text/javascript" src="jquery-3.2.0.min.js" ></script>
<script>
function sub(){
var uname=$("#userName").val();
var likes=[];
if(uname!=""){
$("#name").text("用户名："+$("#userName").val());//val()是值，text()是文本
}
if($("#userPwd").val()!=""){
$("#pwd").text("密码："+$("#userPwd").val());
}
$("#sex").text("性别："+$("input[type='radio']:checked").val());
$("#add").text("地址："+$("#selects option:selected").val());
$("input[type=checkbox]:checked").each(function(i){//得到checkbox选定的值并且遍历
likes[i]=$(this).val();//把值赋给likes数组
});
if(likes.length!=0){
$("#like").text("兴趣爱好："+likes.join(","));//将数组的每个元素连成字符串
}
}
</script>
</head>
<body>
<form>
用户名：<input type="text" id="userName" /><br/>
密码：<input type="password" id="userPwd" /><br />
性别：<input type="radio" name="sexs" checked="checked" value="男"/>男<input type="radio"name="sexs" value="女"/>女<br />
地址：<select id="selects">
<option value="长沙">长沙</option>
<option value="益阳">益阳</option>
<option value="郴州">郴州</option>
</select><br/>
爱好：<input type="checkbox" name="box" value="撸啊撸"/>撸啊撸
<input type="checkbox" name="box" value="打篮球"/>打篮球
<input type="checkbox" name="box" value="打羽毛球"/>打羽毛球<br />
<input type="button" value="提交" οnclick="sub()" />
</form>
<div id="name"></div>
<div id="pwd"></div>
<div id="sex"></div>
<div id="add"></div>
<div id="like"></div>
</body>
</html>