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 阅读(8) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 03-jquery基本选择器

· 05-jquery基本过滤器

· 2_4表单选择器

· jQuery核心函数之选择器（表单选择器）

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称： taotooler
园龄： 5年3个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

taotooler

04-jquery表单选择器

2.4表单选择器

公告

搜索

常用链接

我的标签

随笔分类 (21)

随笔档案 (78)

阅读排行榜

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

	<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>

	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());
	}
	}

	<!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>