HTML-获取元素中的值

最新推荐文章于 2023-05-30 17:31:25 发布

白世伟

最新推荐文章于 2023-05-30 17:31:25 发布

阅读量5.2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/bsw451926392/article/details/102981100

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

获取input框中的值的三种方式

<input type="text" name="demo1" id="demo2" value="你好">

上面是一个input框，其中数据值是“你好”，如果要获取其值有三种方式，其中两种是JS方式，一种是JQuery的方式

// 方式一：
document.all.demo1.value;	// 通过name获取
document.all.demo2.value;	// 通过id获取
// 方式一推荐通过id获取，因为name可能会有重复值，比如option标签或者input标签的radio类型等
// 方式二：
document.getElementById("demo2").value;
// 方式三：
$("#demo2").val();

document.all的含义：
1.这个是用来获取页面内所有元素的一个集合。例如：document.all(0)表示页面内第一个元素。
2.也可以用来判断当前浏览器是不是IE

if(document.all){  
	alert("this is IE!");  
}

判断checkbox框是否被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox的案例</title>
		<script type="text/javascript">
			// 判断checkbox是否有选中
			function howManyChecked() {
				// 获取所有input框元素
				var input = document.getElementsByTagName("input");
				alert("获取到"+input.length+"个input框");
				// 循环获取到的input框元素,判断是否名字为book
				for (var i = 0; i < input.length; i++) {
					if (input[i].name == "book" && input[i].type=="checkbox") {
						if(input[i].checked==true) {
							alert("这是选中框:"+input[i].value);
						}
					} 
				}
			}
		</script>
	</head>
	<body>
		姓名：<input type="text" name="name" id="name" value="张三" /><br/>
		年龄：<input type="text" name="age" id="age" value="15" /><br/>
		读书：
		<input type="checkbox" name="book" value="语文" />语文
		<input type="checkbox" name="book" value="数学" />数学
		<input type="checkbox" name="book" value="英语" />英语
		<input type="button" name="button" id="button" 
			value="查看有几个checkbox被选中" onclick="howManyChecked()"/>
	</body>
</html>

在这里插入图片描述
js中可以直接通过获取元素，然后点属性即可，但是需要确认一下属性对应的值是什么，比如checked的值就是true或false

白世伟

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML-获取元素中的值

<input type="text" name="demo1" id="demo2" value="你好">上面是一个input框，其中数据值是“你好”，如果要获取其值有三种方式，其中两种是JS方式，一种是JQuery的方式// 方式一：document.all.demo1.value; // 通过name获取document.all.demo2.value; // 通过id...
复制链接

扫一扫

专栏目录