jquery-210811-05—jquery表单选择器
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。
该方法无论是否存在表单<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 属性值")
$(":tr"): 不能用,tr 不是 input 标签
例如:
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
表单选择器演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function getTextValue(){
var txt_obj = $(":text");
alert(txt_obj.val());
}
function getRadioValue(){
var radio_obj = $(":radio");
for(var i = 0 ; i < radio_obj.length ; i++) {
var dom_obj = radio_obj[i];
var jquery_obj = $(dom_obj);
alert(jquery_obj.val());
}
}
function getCheckboxValue(){
var checkbox_obj = $(":checkbox");
for (var i = 0; i < checkbox_obj.length; i++) {
var dom_obj = checkbox_obj[i];
var jquery_obj = $(dom_obj);
alert(jquery_obj.val());
}
}
</script>
</head>
<body>
<input type="text" value="text文本"/>
<br/>
<br/>
<input type="radio" value="man"/>男
<br/>
<input type="radio" value="woman"/>女
<br/>
<br/>
<input type="checkbox" value="小米"/>
<br/>
<input type="checkbox" value="华为"/>
<br/>
<input type="checkbox" value="荣耀"/>
<br/>
<br/>
<input type="button" value="获取text文本内容" onclick="getTextValue()"/>
<br/>
<input type="button" value="获取radio的value值" onclick="getRadioValue()"/>
<br/>
<input type="button" value="获取checkbox的value值" onclick="getCheckboxValue()"/>
</body>
</html>