jQuery前端开发学习指南(14)——jQuery表单对象属性过滤选择器

最新推荐文章于 2023-07-22 08:42:18 发布

谷哥的小弟

最新推荐文章于 2023-07-22 08:42:18 发布

阅读量649

点赞数 2

分类专栏： jQuery前端开发学习指南

本文链接：https://blog.csdn.net/lfdfhl/article/details/115338080

版权

jQuery前端开发学习指南专栏收录该内容

20 篇文章 7 订阅

订阅专栏

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

表单对象属性过滤选择器概述

表单对象属性过滤选择器用于依据表单中元素的属性筛选元素。

:enabled

匹配所有可用元素。

例如：查找所有可用的input元素

$("input:enabled")

:disabled

匹配所有不可用元素。

例如：查找所有不可用的input元素

$("input:disabled")

:checked

匹配所有选中的被选中元素(例如：复选框、单选框等)

例如：查找所有选中的复选框元素

$("input:checked")

:selected

匹配所有选中的option元素。

例如：查找所有选中的选项元素

$("select option:selected")

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery基础</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				$(":button").click(function() {

					//示例1.获取选中的性别信息
					alert($(":radio:checked").val());

					//示例2.获取选中的爱好信息			
					$(":checkbox:checked").each(function(){
						alert($(this).val());
					});

					//示例3.获取选中的城市
					alert($("select option:selected").val());

				});

			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>

		<form>
			性别: 
			<input type="radio" name="gender" value='男'>男
			<input type="radio" name="gender" value='女'>女
			<br /><br />

			爱好:
			<input type="checkbox" name="hobby" value="篮球">篮球
			<input type="checkbox" name="hobby" value="排球">排球
			<input type="checkbox" name="hobby" value="足球">足球

			<br /><br />
			城市 <select>
				<option value="">--请选择--</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳">深圳</option>
			</select> 
			
			<br /><br />
			
			<input type="button" value="提交">
		</form>

	</body>
</html>