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

要点:

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>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/83626754