本文共 2420 字，大约阅读时间需要 8 分钟。

使用JavaScript完成复选框的全选和全不选的效果

真实项目开发中少不了这样的需求：在实际的开发中一条记录一条记录地进行删除的话，效率很低，而我们有的时候需要一起删除多条记录，那么就需要通过在表格之前设置一个复选框的形式进行勾选复选框，然后点击一个删除的按钮就能进行批量删除了。效果类似如下：

1. 创建一个HTML页面；
2. 确定事件：复选框的单击(onclick)事件；
3. 触发一个函数；
4. 在函数中，获得最上面的复选框是否被选中；
5. 如果选中，则下面的所有的复选框都被选中；如果没被选中，则下面的所有的复选框都不选中。

我摘出最核心的一个HTML页面如下：

			
   								
   
			    
				     
					      
				     
				     
					      
					      
分类的ID
					      
分类的名称
					      
分类的描述
					      
操作
				     
			    
			    
				     
					      
					      
1
					      
手机数码
					      
手机数码
					      
修改|删除
				     
				     
					      
					      
2
					      
电脑办公
					      
电脑办公
					      
修改|删除
				     
				     
					      
					      
3
					      
烟酒糖茶
					      
烟酒糖茶
					      
修改|删除
				     
				     
					      
					      
4
					      
鞋靴箱包
					      
鞋靴箱包
					      
修改|删除
				     
				     
					      
					      
5
					      
汽车用品
					      
汽车用品
					      
修改|删除
				     
			    
		   
	

然后编写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的概述

• 什么是DOM？

  DOM：Document Object Model，即文档对象模型。要认识JavaScript中的DOM，不可避免就要理解DOM树的概念，将一个HTML的文档加载到内存形成一个树形结构，从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为：
  
  • html页面中写的标签可叫做element；
  • html标签中写的属性可叫做attribute；
  • html标签中的文本可叫做text。

  以上所有的这些都可以称之为Node(节点)，只不过这些节点有不同的类型，具体可分为：

  • 元素节点；
  • 属性节点；
  • 文本节点。

HTML中常用的DOM操作

使用DOM完成对ul中添加一个li元素的操作

直接给出代码示例：

			
   										
   
			
    
北京
			
    
上海
		
   
	

达到的效果为：

动态地添加文件上传输入项

明了DOM常用的操作后，我们再来完成一个案例——动态的添加文件上传输入项，以及点击删除按钮后再删除添加的文件输入项。此处直接给出代码示例：

			
   								
   
			
    
				     
      
					       
上传用户: 
					       
											
				      
				      
					       
上传文件: 
					       
											
				      
							      
					       
					       
						
        
					
				      
			     
    
		
   
	

达到的效果为：

转载地址：https://liayun.blog.csdn.net/article/details/71246523 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！