04-jquery表单选择器

kokotao

已于 2023-01-20 09:32:03 修改

阅读量494

点赞数

分类专栏： jQuery 前端文章标签： jquery javascript ecmascript

于 2023-01-20 09:31:31 首次发布

本文链接：https://blog.csdn.net/weixin_44698624/article/details/128733694

版权

前端同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

jQuery

8 篇文章 1 订阅

订阅专栏

文章展示了如何利用jQuery的表单选择器`:text`,`:radio`和`:checkbox`来选取并获取HTML文档中相应类型的输入元素的值。在示例中，fun1()函数获取文本框的值，fun2()遍历并显示radio按钮的值，而fun3()则展示如何获取被选中的checkbox的值。

摘要由CSDN通过智能技术生成

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>

kokotao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
04-jquery表单选择器

表单悬着去使用dom对象的type属性值定位dom对象，和from标签无关。如下代码有文本框，radio，checkbox选项。//使用表单选择器，获取dom对象。语法：$(".type属性值)
复制链接

扫一扫