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());
}
}
//使用表单获取checkbox值
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>
评论区