真实项目开发中少不了这样的需求：在实际的开发中一条记录一条记录地进行删除的话，效率很低，而我们有的时候需要一起删除多条记录，那么就需要通过在表格之前设置一个复选框的形式进行勾选复选框，然后点击一个删除的按钮就能进行批量删除了。效果类似如下： 下面直接用一个例子来进行讲解，按如下步骤来使用JavaScript完成复选框的全选和全不选的效果：
创建一个HTML页面；确定事件：复选框的单击(onclick)事件；触发一个函数；在函数中，获得最上面的复选框是否被选中；如果选中，则下面的所有的复选框都被选中；如果没被选中，则下面的所有的复选框都不选中。我摘出最核心的一个HTML页面如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function changeColor() { // 获得要操作的对象的控制权 var tab1 = document.getElementById("tab1"); // 获得tbody中的所有的行 var len = tab1.tBodies[0].rows.length; for (var i = 0; i < len; i++) { if (i % 2 == 0) { tab1.tBodies[0].rows[i].style.backgroundColor = "green"; } else { tab1.tBodies[0].rows[i].style.backgroundColor = "gold"; } } } function checkAll() { // 获得最上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中 var ids = document.getElementsByName("ids"); if(selectAll.checked == true) { // 最上面的复选框已被选中 // 获得下面的所有的复选框，修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = true; } } else { // 最上面的复选框没有被选中 // 获得下面的所有的复选框，修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = false; } } } </script> </head> <body onload="changeColor()"> <table id="tab1" border="1" width="80%" align="center"> <thead> <tr> <td colspan="5"><input type="button" value="添加" /><input type="button" value="删除" /></td> </tr> <tr> <th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /></th> <th>分类的ID</th> <th>分类的名称</th> <th>分类的描述</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids" /></td> <td>1</td> <td>手机数码</td> <td>手机数码</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> <td>2</td> <td>电脑办公</td> <td>电脑办公</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> <td>3</td> <td>烟酒糖茶</td> <td>烟酒糖茶</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> <td>4</td> <td>鞋靴箱包</td> <td>鞋靴箱包</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids" /></td> <td>5</td> <td>汽车用品</td> <td>汽车用品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </tbody> </table> </body> </html>然后编写JavaScript代码完成复选框的全选和全不选：
function checkAll() { // 获得最上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中 var ids = document.getElementsByName("ids"); if(selectAll.checked == true) { // 最上面的复选框已被选中 // 获得下面的所有的复选框，修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = true; } } else { // 最上面的复选框没有被选中 // 获得下面的所有的复选框，修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = false; } } }其实上面的JavaScript代码可简写为：
function checkAll() { // 获得最上面的复选框 var selectAll = document.getElementById("selectAll"); var ids = document.getElementsByName("ids"); for (var i = 0; i < ids.length; i++) { ids[i].checked = selectAll.checked; } }如要查看源码，可参考前端简单入门第十三讲 使用JavaScript完成复选框的全选和全不选的效果！
什么是DOM？ DOM：Document Object Model，即文档对象模型。要认识JavaScript中的DOM，不可避免就要理解DOM树的概念，将一个HTML的文档加载到内存形成一个树形结构，从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为：
html页面中写的标签可叫做element；html标签中写的属性可叫做attribute；html标签中的文本可叫做text。以上所有的这些都可以称之为Node(节点)，只不过这些节点有不同的类型，具体可分为：
元素节点；属性节点；文本节点。直接给出代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function addElement() { var city = document.getElementById("city"); // 创建一个元素 var liEl = document.createElement("li"); // 创建一个文本节点 var text = document.createTextNode("深圳"); // 添加子节点 liEl.appendChild(text); city.appendChild(liEl); } </script> </head> <body> <input type="button" value="添加元素" onclick="addElement()" /> <ul id="city"> <li>北京</li> <li>上海</li> </ul> </body> </html>达到的效果为：
明了DOM常用的操作后，我们再来完成一个案例——动态的添加文件上传输入项，以及点击删除按钮后再删除添加的文件输入项。此处直接给出代码示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function addfiles() { // 首先创建一个div var divEle = document.createElement("div"); // 创建一个input输入项，如<input type="file" name="pic" /> var inputEle = document.createElement("input"); inputEle.type = "file"; inputEle.name = "pic"; // 创建button按钮 var btnEle = document.createElement("input"); btnEle.type = "button"; btnEle.value = "删除"; // 给btnEle元素添加onclick事件匿名函数 btnEle.onclick = function() { // 删除当前点击的input输入项 this.parentNode.parentNode.removeChild(this.parentNode); } // 把inputEle和inputEle添加到divEle中去 divEle.appendChild(inputEle); divEle.appendChild(btnEle); // 拿到大的id为files的div，向里面添加divEle document.getElementById("files").appendChild(divEle); } </script> </head> <body> <form action="${pageContext.request.contextPath }/servlet/UpfileServlet" enctype="multipart/form-data" method="post"> <table> <tr> <td>上传用户: </td> <td> <input type="text" name="username" /> </td> </tr> <tr> <td>上传文件: </td> <td> <input type="button" value="上传文件" onclick="addfiles()" /> </td> </tr> <tr> <td></td> <td> <div id="files"></div> </td> </tr> </table> </form> </body> </html>达到的效果为：
