JavaScript案例全选获取下拉框选中的值

「已注销」

已于 2022-03-26 14:43:44 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

于 2022-03-26 14:24:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_67192586/article/details/123755087

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript进行全选操作，详细讲解了如何在页面加载时获取下拉框选中的值，并且探讨了实现点赞动画的技巧和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
	function choice(obj){
		var checkbox = document.getElementsByName('music');
		for(var i=0;i<checkbox.length;i++){
			if(obj=='全选'){
				checkbox[i].checked=true;
			}
			if(obj=='全不选'){
				checkbox[i].checked=false;
			}	
			if(obj=='反选'){
				checkbox[i].checked=!checkbox[i].checked;
			}
		}
	}
</script>
</head>
	<body>
		<h1>添加音乐</h1>
		<input type="checkbox" name="music" />哪里都是你<br/>
		<input type="checkbox" name="music" />关于你<br/>
		<input type="checkbox" name="music" />偏爱<br/>
		<input type="checkbox" name="music" />Love Story(Taylor's Version)<br/>
		<input type="checkbox" name="music" />晚风<br/>
		<input type="checkbox" name="music" />蜜蜂<br/>
		<input type="checkbox" name="music" />这首歌没唱直接听<br/>
		<input type="button" value="全选" onclick="choice('全选')" />
		<input type="button" value="全不选" onclick="choice('全不选')" />
		<input type="button" value="反选" onclick="choice('反选')" />
	</body>
</html>

获取下拉框选中的值

<script type="text/javascript">
	function test(){
		var sel = document.getElementById('sel');
	//	console.log(sel.value); // 获取到你选择的选择对应的value值
		var options = sel.options;
		for(var i=0;i<options.length;i++){
			// options[i] 可以获得到每个下拉选项,但是想过滤出被选中的那个
			if(options[i].selected == true){	//过滤出被选中的那个
				alert(options[i].value+'----'+options[i].text);
			}
		}
	}
</script>
</head>
	<body>
		<select id="sel" onchange="test()">
			<option value="0">青铜班</option>
			<option value="1">白银班</option>
			<option value="2">黄金班</option>
			<option value="3">铂金班</option>
			<option value="4">钻石班</option>
		</select>
	</body>
</html>

页面加载获得焦点

<body onload="document.getElementById('username').focus();"> <!--onload页面加载  focus获得焦点-->
		用户名:<input type="text" id="username"/>
		密码:<input type="password"/>
	</body>

实现点赞动画

<script type="text/javascript">
	function addGreat(){
		// 创建一个动图:
		var imgNode = document.createElement('img');
		imgNode.src="./emoji.gif";
		
		//获取div
		var mydiv = document.getElementById('mydiv');
		// 将动图放入div中:
		mydiv.appendChild(imgNode);
		
		// 调整动图大小
		imgNode.style.width="85px";
		
		// 给动图设置一定绝对定位
		imgNode.style.position="absolute";
		imgNode.style.top="200px";
		imgNode.style.left="200px"
		
		// 让emoji往上走,边走边消失
		// 设置图片的饱和度:
		imgNode.style.opacity= 1 ;
		var id =setInterval(function(){
			// 饱和度一直在减少:
			imgNode.style.opacity-=0.01;
			// 距离上边距的高度也应该逐渐减少:
			imgNode.style.top=(imgNode.offsetTop-2)+"px";
			console.log('aaa');
			
			if(imgNode.style.opacity <=0){
				clearInterval(id);
			}
		},15);
	}
</script>
</head>
	<body>
		<input type="button" value="点赞" onclick="addGreat()" />
		<div id="mydiv"></div>
	</body>
</html>