jQuery表单选择器

最新推荐文章于 2018-11-27 23:35:45 发布

Tony_Liu0611

最新推荐文章于 2018-11-27 23:35:45 发布

阅读量319

点赞数

分类专栏： web前段(jQuery)

本文链接：https://blog.csdn.net/Tony_Liu0611/article/details/51931214

版权

web前段(jQuery) 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>表单选择器</title>
	<script type="text/javascript" src="../jquery-2.2.3.js"></script>
	</head>
	<body>
	<form action="#" method="get">
	姓名：<input type="text" value="余罪" disabled />
	<br />
	密码：<input type="password" />
	<br />
	性别：<input type="radio" name="sex_radio" checked/> 男 <input type="radio" name="sex_radio" /> 女
	<br />
	身份：<input type="checkbox" name="my_checkbox" /> 警察
	<input type="checkbox" name="my_checkbox" /> 卧底
	<input type="checkbox" name="my_checkbox" /> 儿子
	<br />
	女友：<select id="my_sel" multiple>
	<option>大胸姐</option>
	<option>嘉文</option>
	<option>安安</option>
	<option>周周</option>
	<option>夜总会女老板</option>
	</select>
	<br />
	提交：<input type="button" value="购买"/>
	</form>

	<script type="text/javascript">
	/*
	表单选择器：专门用来获取表单相关的选择器
	*/
	//获取所有input元素
	var f1 = $(":input");
	console.log(f1.length);

	//获取表单里所有text元素
	var f2 = $(":text");
	console.log(f2.length);
	console.log(f2.val());

	//获得表单里所有password元素
	var f3 = $(":password");
	console.log(f3.length);
	console.log(f3.val());

	//获取表单里所有radio元素
	var f4 = $(":radio");
	console.log(f4.length);
	console.log(f4[0].checked);

	$("[type = button]").get(0).onclick = function () {
	//获取所有被checked的元素
	//注意：包括radio、checkbox以及select都适用
	var f5 = $(":checked");
	console.log(f5.length);

	//获取所有checkbox被checked的元素
	var f6 = $(":checkbox:checked");
	var f7 = $("[type = checkbox]:checked");
	console.log(f6.length);
	console.log(f7.length);

	//专门给select标签用的
	var f8 = $(":selected");
	console.log(f8.length);

	//获得所有表单禁用的元素
	var f9 = $(":disabled");
	console.log(f9.val());
	}

	</script>
	</body>
	</html>

Tony_Liu0611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单选择器

lang="en"> charset="UTF-8"> 表单选择器 type="text/javascript" src="../jquery-2.2.3.js"> action="#" method="get"> 姓名：type="text
复制链接

扫一扫