jquery-210811-05---jquery表单选择器

最新推荐文章于 2024-09-10 08:52:32 发布

原创最新推荐文章于 2024-09-10 08:52:32 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#jquery

jquery 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用jQuery进行表单元素选择，包括文本框、密码框、单选按钮、复选框等，并通过示例展示了如何获取这些元素的值。适合前端开发者学习和实践表单操作技巧。

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++) {
					
					// 方法01，使用dom对象获取value值
					// 先转成dom对象
					var dom_obj = radio_obj[i];
					// alert(dom_obj.value);
					
					// 方法02，使用jquery对象获取value值
					// 把dom对象转为jquery对象，再使用val()方法获取
					var jquery_obj = $(dom_obj);
					alert(jquery_obj.val());
				}
			}
			
			function getCheckboxValue(){
				
				// 这也是一个数组，有三个值，循环取值
				var checkbox_obj = $(":checkbox");
				for (var i = 0; i < checkbox_obj.length; i++) {
					
					// dom对象取值
					var dom_obj = checkbox_obj[i];
					// alert(dom_obj.value);
					
					// jquery对象取值
					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>