jQuery获取input标签的值(text,radio,checkbox)

这段时间,刚刚学习了jQuery.就想着写一个小demo总结一下.如何获取input标签的值.发现框架是真的好用.方便了很多.

//下面是获取值的html界面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>

<style>
div{	
	margin:100px;
	font-size:24px;
}
div input{
	font-size:24px;
}

</style>

</head>
<script src="jquery-2.1.1.min.js"></script>
<script src="user.js"></script>
<body>
<div>
<input type="text" placeholder="账号" id="zh"/>
<p/>
<input type="radio" name="sex" value="0"  />男
<input type="radio" name="sex" value="1"  checked="checked"/>女
<p/>
<input type="checkbox" name="hobby" value="swim" />swim
<input type="checkbox" name="hobby" value="game" />game
<input type="checkbox" name="hobby" value="video" />video
<p/>
<input type="button" id="submit" value="提交" />
&nbsp;&nbsp;
<input type="button" id="look" value="查看注册用户信息" />
<div>
</body>
</html>
<script>

$("#submit").click(function(){
	var zh = $("#zh").val();
	var sex = $("[name='sex']:checked").val();
	var hobbies = "";
	
	//将hobby复选框的值 总和成 ,, 的形式
	$("[name='hobby']:checked").each(function(index, element) {
		hobbies += $(this).val()+",";
    });	
	
	hobbies = hobbies.slice(0,-1);
	//用json传值
	var user = new User(zh,sex,hobbies);
	var jsonUser = JSON.stringify(user);
	console.log(jsonUser);
	localStorage.setItem("user",jsonUser);
	
});

$("#look").click(function(){
	window.location="用户信息.html";	
});

</script>

下面是获取值的界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户信息</title>
<style>
div{	
	margin:100px;
	font-size:24px;
}
div input{
	font-size:24px;
}

</style>
</head>
<script src="jquery-2.1.1.min.js"></script>
<script src="user.js"></script>
<body>

<div>
<input type="text" placeholder="账号" id="zh"/>
<p/>
<input type="radio" name="sex" value="0" checked="checked"/>男
<input type="radio" name="sex" value="1"  />女
<p/>
<input type="checkbox" name="hobby" value="swim" />swim
<input type="checkbox" name="hobby" value="game" />game
<input type="checkbox" name="hobby" value="video" />video
<p/>
<input type="button" id="submit" value="修改" />
<div>
</body>
</html>
<script>

$(function(){
	var jsonUser = localStorage.getItem("user");
	var user = JSON.parse(jsonUser);
	var userClass = new User();
	
	//当json中的key 与 定义类 User中的key (属性名)相同时 赋值
	for(var userKey in user){	
		for(var userClasskey in userClass){	
			if(userKey == userClasskey){
				userClass[userClasskey]=user[userKey];
			}
		}
	}

	$("#zh").val(userClass.getName());
	$("[name='sex'][value="+userClass.getSex()+"]").attr("checked","checked");
	var hobbies = userClass.getHobby().split(",");
	for(var i=0;i<hobbies.length;i++){
		$("[name='hobby'][value="+hobbies[i]+"]").attr("checked","checked");
	}	
});
</script>

上面写js对象写是为了学习,很多知识还不太熟悉.后续估计会改进一下...而那个嵌套循环,就是为了实践一下,key的匹配.

jQuery获取input标签的值(text,radio,checkbox)

猜你喜欢