JS排他功能—一个选中，其余的都变化

最新推荐文章于 2022-06-28 18:18:10 发布

何迟

最新推荐文章于 2022-06-28 18:18:10 发布

阅读量3.5k

点赞数 1

分类专栏： Javascript 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/83626754

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Javascript

27 篇文章 0 订阅

订阅专栏

要点：

1.input添加点击的响应事件，用的for循环，是在加载页面的时候执行的，而onclick事件后面的的for循环，是需要将点击之后，响应这个操作之后执行的。

2.通过getElementByTagName()选择出来的标签元素，不管是一个还是多个都是存放在伪元素中的。所以可以通过遍历来获取准确的标签元素，而不可以使用 . 语法来改变对象的属性值（就算只有这一个对象）。

html和内置的js代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="选我选我">
	<input type="button" value="选我选我">
	<input type="button" value="选我选我">
	<input type="button" value="选我选我">
	<input type="button" value="选我选我">

	<script type="text/javascript">
		var inpObjs = document.getElementsByTagName('input');
		// 通过标签类别获取对象，储存为伪数组的形式，可以像数组一样遍历
		for (var i=0; i<inpObjs.length;i++) {
			//为每个input标签，添加一个点击的方法
			inpObjs[i].onclick = function(){
				for(var j=0;j<inpObjs.length;j++){
					inpObjs[j].value = "选我选我";
				}
				// 在响应onclick之前，先将全部的标签内容设置为跟没选状态时一致
			this.value = "haha,选了我！";
			// 在js中，this可以用来代替当前的元素对象，这里最后赋值区别于其他标签
			}	
		}
		// 同时注意，上面的input添加点击的响应事件，用的for循环，是在加载页面的时候执行的，
		// 而onclick事件后面的的for循环，是需要将点击之后，响应这个操作之后执行的
	</script>
</body>
</html>

效果：

何迟

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS排他功能—一个选中，其余的都变化

要点：1.input添加点击的响应事件，用的for循环，是在加载页面的时候执行的，而onclick事件后面的的for循环，是需要将点击之后，响应这个操作之后执行的。2.通过getElementByTagName()选择出来的标签元素，不管是一个还是多个都是存放在伪元素中的。所以可以通过遍历来获取准确的标签元素，而不可以使用 . 语法来改变对象的属性值（就算只有这一个对象）。html和内...
复制链接

扫一扫