js全选练习

ps酷教程

已于 2022-05-22 23:42:25 修改

阅读量128

点赞数

分类专栏：前端学习文章标签： javascript 前端

于 2022-05-22 23:24:46 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/124918689

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<script>
			
			window.onload = function() {
				var checkedAllBox = document.getElementById('checkedAllBox')
				var checkedAllBtn = document.getElementById('checkedAllBtn')
				var checkedNoBtn = document.getElementById('checkedNoBtn')
				var checkedRevBtn = document.getElementById('checkedRevBtn')
				var sendBtn = document.getElementById('sendBtn')
				var itemsList = document.getElementsByName('items')
				checkedAllBox.onclick = function(e) {
					// console.log(e)                // 默认会传过来一个事件对象
					// console.log(e.target)         // 触发事件e的对象
					// console.dir(e.target)         // 可以查看触发事件e的对象的所有属性和方法
					// console.log(e.target.checked) // 可以从 触发事件e的对象的所有属性和方法 中看到有 checked属性 
					
					for (var i = 0; i < itemsList.length; i++) {
						// itemsList[i].checked = e.target.checked
						
						itemsList[i].checked = this.checked
						// 在事件的响应函数中，响应函数是给谁绑定的，this就是谁
						//     其实也容易理解：根据前面console.dir(document.getElementById("checkedAllBox"))
						//                  可以查看到checkedAllBox这个节点对象的所有属性和方法，其中就有onclick属性，
						//                  而我们定义的匿名函数则是绑定给了checkedAllBox这个节点对象的onclick属性，
						//                  换句话说：checkedAllBox这个节点对象上，有了onclick对应的函数，
						//                          所以checkedAllBox这个节点对象就可以去调用我们 绑定的onclick对应的 函数，
						//                          既然这个节点对象可以调用这个方法了，那问题就变成了：
						//                          谁去使用checkedAllBox这个节点对象去调用 绑定的onclick对应的 函数？
						//                  那么，当浏览器监听到checkedAllBox这个dom被点击了，那么浏览器就会去找checkedAllBox这个
						//                       节点对象上的onclick属性上，有没有绑定函数。如果绑定了函数，那么浏览器就会去使用这个
						//                       checkedAllBox节点对象调用这个对象绑定的函数了。
						//                       所以，显然，这个this，就是：谁调用的函数，谁就是this，
						//                       所以就是checkedAllBox这个节点对象了。
				        //                  那就是说，是浏览器监听到了checkedAllBox对象的点击事件，
        				//                           就执行了checkedAllBox.onclick() 这行代码
					}
					
				}
				
				checkedAllBtn.onclick = function() {
					for (var i = 0; i < itemsList.length; i++) {
						itemsList[i].checked = true
					}
					checkedAllBox.checked = true
				}
				
				checkedNoBtn.onclick = function(){
					for (var i = 0; i < itemsList.length; i++) {
						itemsList[i].checked = false
					}
					checkedAllBox.checked = false
				}
				
				checkedRevBtn.onclick = function(){
					for (var i = 0; i < itemsList.length; i++) {
						itemsList[i].checked = !itemsList[i].checked
					}
					checkedAllBox.checked = isAllChecked()
				}
				
				function isAllChecked(){
					var flag = true
					for (var i = 0; i < itemsList.length; i++) {
						if(!itemsList[i].checked) {
							flag = false
							break
						}
					}
					return flag
				}
				
				
				for (var i = 0; i < itemsList.length; i++) {
					itemsList[i].onclick = function() {
						checkedAllBox.checked = isAllChecked()
					}
				}
				
				sendBtn.onclick = function(){
					var arr = []
					for (var i = 0; i < itemsList.length; i++) {
						if(itemsList[i].checked) {
							arr.push(itemsList[i].value)
						}
					}
					arr.forEach(e=>alert(e))
				}
				
			}
			
		</script>
		
		<form method="post" action="">
		    
		    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		    <br />
		    
		    <input type="checkbox" name="items" value="足球" />足球
		    <input type="checkbox" name="items" value="篮球" />篮球
		    <input type="checkbox" name="items" value="羽毛球" />羽毛球
		    <input type="checkbox" name="items" value="乒乓球" />乒乓球
		    
		    <br />
		    
		    <input type="button" id="checkedAllBtn" value="全　选" />
		    <input type="button" id="checkedNoBtn" value="全不选" />
		    <input type="button" id="checkedRevBtn" value="反　选" />
		    <input type="button" id="sendBtn" value="提　交" />
		    
		</form>
		
	</body>
</html>

ps酷教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js全选练习

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> </style> </head> <body> <script> window.onload = function() { var checkedAllBox = doc
复制链接

扫一扫

专栏目录