/**
复习一下:原生js的一些知识,全选反选虽然是简单的案例,但是很多地方都能用到。
先复习下原理知识点,后面再写一个点餐选择框实例
**/
/**原生js
/*需求分析:
* (1)点击全选,所有的选择框都是选中状态
* (2)点击全不选择,所有的选择框都是未选中状态
* (3)点击反选,所有的选择框选择状态与自身当前状态相反
/* 思路分析:
* 1.获取元素
* 2.添加事件
* 3.事件处理
*/
![效果预览](https://img-blog.csdn.net/20180818124554254?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqaHpqaDg5Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
<!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>