JavaScript学习（第八章）

Smrsar

已于 2023-02-11 13:49:21 修改

阅读量46

点赞数

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

于 2022-10-07 21:29:04 首次发布

本文链接：https://blog.csdn.net/weixin_59973239/article/details/127199252

版权

Java 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

一，Javascript中常用的事件

事件是页面上的某种操作，事件的源头来自用户。当用户鼠标点击或者按下某个键时进行和页面交互时就会触发事件。

JavaScript中基本的事件模型
事件	事件触发时机
onblur	元素失去焦点时
onchange	元素值发生改变且已失去焦点后
onclick	鼠标在元素上单机时
onblclick	鼠标在元素上双击时
onfocus	元素获得焦点
onkeydown	键盘上某个键被按下时
onmousedown	在元素上按下鼠标时
onmousemove	在元素上移动鼠标指针时
onmouseout	鼠标指针移出元素时
onmouseup	鼠标指针移动到元素的上方时
onsubmit	表单被提交时

二，多选框的全选与不全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="selectAll" />全选/全不选
		<hr>
		<ul class="shop">
			<ol><input type="checkbox" />苹果</oi>
				<oi><input type="checkbox" />梨</oi>
				<oi><input type="checkbox" />葡萄</oi>
				<oi><input type="checkbox" />香蕉</oi>
				<oi><input type="checkbox" />榴莲</oi>
		</ul>
		<script type="text/javascript">
			//给全选绑定一个单击事件
			document.getElementById("selectAll").onclick = function() {
				//this：指的是当前触发单击事件的元素
				console.log(this.checked)
				//获取当前全选的选中状态
				var isChecked = this.checked
				//获取到所有的水果的复选框
				var cbs = document.querySelectorAll(".shop input")
				//通过循环来将全选的状态赋值给水果的复选框
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = isChecked
				}
				//给所有的水果的复选框绑定单击事件
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].onclick = function() {
						var count = 0; //用来统计选中的复选框的个数
						for (var j = 0; j < cbs.length; j++) {
							//判断复选框的选中状态
							if (cbs[j].checked) {
								count++
							}
						}
						//判断选中的复选框的个数与实际的复选框的个数是否相等
						if (count == cbs.length) {
							//将全选的复选框的状态改为选中
							document.getElementById("selectAll").checked = true
						} else {
							//将全选的复选框的状态改为取消
							document.getElementById("selectAll").checked = false
						}
					}
				}
			}
		</script>
	</body>
</html>