全选:
当鼠标点击全选这个复选框时,调用函数allSelet().使用for循环遍历每一个需要被选中的input元素(我们它们全部放在箱子里面),并给它们的checked属性赋值true。这样就完成了全选。
全不选:
当鼠标点击全选这个复选框时,调用函数noSelet().使用for循环遍历每一个需要被选中的input元素(包括全选那个复选框,所以我们直接从document中获取input),并给它们的checked属性赋值false。这样就完成了全不选。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="selectAll" id="selectAll" value="" />全选/全不选
<!--<input type="checkbox" name="selectAll" id="selectReverse" value="" />反选-->
<p></p>
<hr />
<ul class="shop">
<li><input type="checkbox" name="" id="" value="" />苹果</li>
<li><input type="checkbox" name="" id="" value="" />梨</li>
<li><input type="checkbox" name="" id="" value="" />葡萄</li>
<li><input type="checkbox" name="" id="" value="" />香蕉</li>
<li><input type="checkbox" name="" id="" value="" />榴莲</li>
</ul>
<script type="text/javascript">
// 全选绑定单击事件
document.getElementById("selectAll").onclick=function(){
// this:指的是当前触发单击事件的元素
console.log(this.checked)
// 获取当前全选的选中状态
var ischeck=this.checked
// 获取到所有的水果的复选框
var cbs=document.querySelectorAll(".shop input")
// 通过循环来将全选的状态赋值给水果的复选框
for (var i=0;i<cbs.length;i++) {
cbs[i].checked=ischeck
}
}
</script>
</body>
</html>
checked属性是一个布尔属性
checked属性规定在页面加载时应该被预先选定的<input>元素
checked属性适用于<input type="checkbox">和<input type="radio">
checked属性也可以在页面加在后,通过JavaScript代码进行设置
this指的是当前对象