04-jquery表单选择器

2.4表单选择器

表单选择器使用dom对象的type属性值定位dom对象，和from标签无关。
语法：$(".type属性值)

eg：

<input type="text"/>
<input type="text"/>
表单选择器：$(":text")

举个栗子：
如下代码有文本框，radio，checkbox选项
分别用表单选择器和dom对象和jQuery函数进行值的获取；

<body>
		<p>文本框</p>
		<input  type="text" value="我是type=text"/><br />
		<p>radio</p>
		<input  type="radio" value="man"/>男<br />
		<input type="radio" value="woman"/>女<br />
		<br />
		<p>checkbox</p>
		<input  type="checkbox" value="bike"/>骑行<br />
		<input  type="checkbox" value="football"/>足球<br />
		<input type="checkbox" value="music">音乐<br />
		<br />
		<br/>
		<input type="button" value="获取text值" onclick="fun1()"><br /><br/>
		<input type="button" value="获取radio值" onclick="fun2()"><br /><br/>
		<input type="button" value="获取checkbox值" onclick="fun3()"><br /><br/>
		
	</body>

//使用表单选择器，获取dom对象

function fun1(){
				//使用表单选择器，获取dom对象
				var obj=$(":text");
				alert(obj.val());
			}

请添加图片描述
//获取radio的值

function fun2(){
				//$(":radio")
				var obj=$(":radio");
				for(var i=0;i<obj.length;i++){
					var dom=obj[i];
					alert("dom的属性值="+dom.value+",使用jquery的函数="+$(dom).val());
				}
			}

获取radio的值
//使用表单获取checkbox值

function fun3(){
				//使用表单获取checkbox值
				var obj=$(":checkbox");
				for(var i=0;i<obj.length;i++){
					alert($(obj[i]).val());
				}
			}

使用表单获取checkbox值
全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器，获取dom对象
				var obj=$(":text");
				alert(obj.val());
			}
			function fun2(){
				//$(":radio")
				var obj=$(":radio");
				for(var i=0;i<obj.length;i++){
					var dom=obj[i];
					alert("dom的属性值="+dom.value+",使用jquery的函数="+$(dom).val());
				}
			}
			function fun3(){
				//使用表单获取checkbox值
				var obj=$(":checkbox");
				for(var i=0;i<obj.length;i++){
					alert($(obj[i]).val());
				}
			}
		</script>
	</head>
	<body>
		<p>文本框</p>
		<input  type="text" value="我是type=text"/><br />
		<p>radio</p>
		<input  type="radio" value="man"/>男<br />
		<input type="radio" value="woman"/>女<br />
		<br />
		<p>checkbox</p>
		<input  type="checkbox" value="bike"/>骑行<br />
		<input  type="checkbox" value="football"/>足球<br />
		<input type="checkbox" value="music">音乐<br />
		<br />
		<br/>
		<input type="button" value="获取text值" onclick="fun1()"><br /><br/>
		<input type="button" value="获取radio值" onclick="fun2()"><br /><br/>
		<input type="button" value="获取checkbox值" onclick="fun3()"><br /><br/>
		
	</body>
</html>
posted @ 2023-01-20 09:31  taotooler  阅读(11)  评论(0)    收藏  举报  来源