js实现全选、div的移动

最新推荐文章于 2024-08-08 13:46:02 发布

周朝兵

最新推荐文章于 2024-08-08 13:46:02 发布

阅读量576

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_45251955/article/details/103348878

版权

本文介绍了如何仅使用JavaScript实现全选功能，详细讲解了HTML布局的创建和JS实现全选的逻辑思路，包括查找页面元素和利用checked属性进行判断。此外，还探讨了通过键盘事件控制div移动的技术，常用于类似2048、贪吃蛇等小游戏的实现。

摘要由CSDN通过智能技术生成

全选

全选这个功能在很多地方都可以看见，几乎已经是表格所必备的功能之一了，那么今天我们就一起来看看，如何只用js来实现全选功能吧。
首先，我们先来创建一个HTML的布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	td{
   
		border: 1px solid;
	}
</style>
<body>
	<!-- 1.全选功能 -->
	<table>
		<tr>
			<td><input type="checkbox" onclick="qux()" class="a"></td>
			<td><span>全选</span></td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="qx()" class="a">