jquery-210812-02—jquery表单过滤器
jquery表单过滤器介绍
1. 选择可用的文本框
$(":text:enabled")
enabled:可用状态
disabled:不可用状态
2. 选择不可用的文本框
$(":text:disabled")
3. 复选框选中的元素
$(":checkbox:checked")
4. 选择指定下拉列表的被选中元素
选择器>option:selected
演示案例
<!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(){
$("#btn01").click(function(){
var text_obj = $(":text:enabled");
for (var i = 0; i < text_obj.length; i++) {
var dom_obj = text_obj[i];
alert(dom_obj.value);
};
})
$("#btn02").click(function(){
var ck_obj = $(":checkbox:checked");
ck_obj.each(function(i,n){
alert("第"+i+"个元素,\n"+"dom值为:"+n.value+"\n"+"jquery值为:"+$(n).val());
})
})
$("#btn03").click(function(){
var $select_obj = $("#select01>option:selected");
alert($select_obj.val()+" "+$select_obj.text());
})
})
</script>
</head>
<body>
<input type="text" id="txt01" value="txt01"/>
<br/>
<input type="text" id="txt02" value="txt02" disabled="true"/>
<br/>
<input type="text" id="txt03" value="txt03"/>
<br/>
<input type="text" id="txt04" value="txt04" disabled/>
<br/>
<br/>
<input type="checkbox" value="华为"/>华为
<br/>
<input type="checkbox" value="小米"/>小米
<br/>
<input type="checkbox" value="荣耀"/>荣耀
<br/>
<br/>
<select id="select01">
<option value="淘宝">淘宝</option>
<option value="京东" selected>京东</option>
<option value="拼多多">拼多多</option>
</select>
<br/>
<br/>
<br/>
<input type="button" id="btn01" value="显示所有可用的text值为hello的"/><br/>
<input type="button" id="btn02" value="显示被选中复选框的值"/><br/>
<input type="button" id="btn03" value="显示下拉表选中的值"/><br/>
</body>
</html>