JS按钮排他功能实现

最新推荐文章于 2023-10-14 21:41:52 发布

Jasonwx123

最新推荐文章于 2023-10-14 21:41:52 发布

阅读量488

点赞数

分类专栏： javascript 文章标签： javascript css html5 css3

本文链接：https://blog.csdn.net/JsonWuxin/article/details/108098448

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮的排他功能</title>
	</head>
	<body>
		<input type="button" value="red" style="color:red"/>
		<input type="button" value="red" style="color:red"/>
		<input type="button" value="red" style="color:red"/>
		<input type="button" value="red" style="color:red"/>
		<input type="button" value="red" style="color:red"/>
	</body>
	<script>
		var obj = document.getElementsByTagName('input');
		for(var i = 0 ;i < obj.length ; i++){
			obj[i].index = i;// 下标赋值
			obj[i].onclick = function(){
				/*
				 * 思路 1:
				 * 1.更改选中元素的内容 及 样式 【.style.color】
				 * 2.给当前元素的下标赋值 obj[i].index= i
				 * 3.将选中的元素内容【value】及样式【style.color】更改。
				 * 3.遍历obj对象
				 *   》 当下标不是选中下标时，其他元素内容【value】及样式【style.color】不变
				 * this.value = 'yellow';// 将选中的元素【input】内容【value】值更改为 'yellow'
				this.style.color = 'yellow';//将选中的元素【input】样式【style.color】更改为 'yellow'
				var index = this.index;// 获取当前下标
				for(var j = 0 ; j < obj.length ;j++){// 遍历obj对象
					if(j!=index){
						obj[j].value = 'red';
						obj[j].style.color = 'red';
					}
				}*/
				/*
				 * 思路2：
				 * 1.遍历obj对象 将每一个元素内容及样式设置为初始值【value:red,color:red】
				 * 2.将选中的当前obj对象内容及样式更改
				 * */
				for(var j = 0 ;j < obj.length;j++){
					obj[j].value = 'red';
					obj[j].style.color = 'red';
				}
				this.value = 'yellow';
				this.style.color = 'yellow';
			}
		}
	</script>
</html>