jquery-210812-02---jquery表单过滤器

jquery-210812-02—jquery表单过滤器

• 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);
					};
					
					// 把可用text的值设置为hello
					// $(":text:enabled").val("hello");
				})
				
				$("#btn02").click(function(){
					var ck_obj = $(":checkbox:checked");
					// for (var i = 0; i < ck_obj.length; i++) {
					// 	var dom_obj = ck_obj[i];
					// 	alert(dom_obj.value);
					// }
					
					ck_obj.each(function(i,n){
						alert("第"+i+"个元素，\n"+"dom值为："+n.value+"\n"+"jquery值为："+$(n).val());
					})
				})
				
				$("#btn03").click(function(){
					// var $select_obj = $("select>option:selected");
					// alert($select_obj.val()+"   "+$select_obj.text());
					
					// 根据id选择下拉列表
					// 选择下拉列表id为select01
					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>