/**
复习一下:原生js的一些知识,全选反选虽然是简单的案例,但是很多地方都能用到。
先复习下原理知识点,后面再写一个点餐选择框实例
**/
/**原生js
/*需求分析:
* (1)点击全选,所有的选择框都是选中状态
* (2)点击全不选择,所有的选择框都是未选中状态
* (3)点击反选,所有的选择框选择状态与自身当前状态相反
/* 思路分析:
* 1.获取元素
* 2.添加事件
* 3.事件处理
*/
![效果预览](https://i-blog.csdnimg.cn/blog_migrate/126a0079bf9d9a83229cfb8da5732c33.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">
</body>
<script>
var checkList = document.getElementsByClassName('check');
var checkAll = document.getElementById('checkAll');
var unCheckAll = document.getElementById('unCheckAll');
var reverseCheck = document.getElementById('reverseCheck');
checkAll.onclick = function ( ) {
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = true;
}
}
unCheckAll.onclick = function ( ) {
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = false;
}
}
reverseCheck.onclick = function ( ) {
for(var i = 0;i<checkList.length;i++){
console.log ( checkList[ i ].checked );
checkList[i].checked = !checkList[i].checked;
}
}
</script>
</html>