表单选择器

表单选择器

表单选择器是form标签对

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

使用的一种快捷方法。

语法：$(":type属性值")

例如：

$(":text")选取所有的单行文本框

$(":password")选取所有的密码框

$(":radio")选取所有的单选框

有type属性就能用，和有没有form标签无关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器
				var obj = $(":text");
				//获取value属性的值
				alert(obj.val());
			}
			
			function fun2(){
				//定位radio
				var obj = $(":radio");
				//循环数组
				for(var i=0;i<obj.length;i++) {
					var dom = obj[i];
					//使用dom对象的属性，获取value值
					alert(dom.value);
				}
			}
			
			function fun3(){
				//定位checkbox
				var obj = $(":checkbox");
				for(var i = 0;i<obj.length;i++) {
					var dom = obj[i];
					alert(dom.value);
					
					//1. 需要jQuery对象
//					var jObj = $(dom);	//jObj 是jQuery对象
					//2. 调用jQuery函数
//					alert(jObj.val());
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="text" value="我是type=text" /> <br />
		
		<input type="radio" value="man" />男 <br />
		<input type="radio" value="woman" />女<br />
		
		<input type="checkbox" value="bike" /> 骑行 <br />
		<input type="checkbox" value="football" /> 骑行 <br />
		<input type="checkbox" value="music" /> 音乐 <br />
		
		<input type="button" value="读取text的值" onclick="fun1()" />
		<br />
		<input type="button" value="读取radio的值" onclick="fun2()" />
		<br />
		<input type="button" value="读取checkbox的值" onclick="fun3()" />
	</body>
</html>

运行：

点击text按钮：

点击radio按钮：

点击checkbox按钮：

posted @ 2021-07-27 11:19  初中生林开心  阅读(99)  评论(0)    收藏  举报