<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no, email=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<script>
var checkAll= document.getElementById('checkAll');//找到这个全选按钮
var checkInvert= document.getElementById('checkInvert');//找到这个反选按钮
var checkbox = document.getElementById('checkboxContainer').getElementsByTagName('input');//找到所有的盒子里面的checkbox
//全选事件
checkAll.onclick = function(){
//我们先给按钮一个点击事件，然后建立一个for循环，找到所有的盒子下的input，在循环内部，我们就可以让盒子内部的checkbox的选中值等于我们全选按钮的选种值；
//这样，我们就完成了全选。
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked = qx.checked;
checkInvert.checked = false;//还没完，这句话是什么意思呢?
//这是为了防止你点击了全选按钮，又去点击反选的时候，发现，全选按钮还在点击状态不信你去掉点击试试看
}
}
//同理，我们来完成反选；反选就是给我们的盒子下面的所有checkbox一个相反的chebox选中的值就可以了。
//注意，这里不是反选按钮相反的值，而是同样的所有checkbox的相反的值
checkInvert.onclick = function(){
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked = !checkbox[i].checked;
checkAll.checked =false;//这里和全选一样，是为了点击反选按钮而出现的全选按钮选中的小bug；
}
}
</script>
<body>
<input type="checkbox" id='checkAll' name="qx"/><label for="checkAll">全选</label>
<input type="checkbox" id='checkInvert' name="checkInvert" />
<label for="checkInvert">反选</label>
<div class="checkbox" id="checkboxContainer"><br><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
