<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选</title>
<style>
#allin span{
display:inline-block;
width:150px;
margin-top:10px;
font-size:18px;
text-align: center;
border-radius:12px;
font-family:"楷体";
}
#allin input:checked +span{
background:#ADBDCC;
color: #fff;
}
</style>
</head>
<body>
<input type="checkbox" id="input1"><span>全选</span>
<input type="checkbox" id="input2"><span>反选</span>
</br>
<div id="allin">
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
<input type="checkbox"><span>东方时空水电费</span>
</br>
</div>
</body>
<script>
var ins1=document.getElementById('input1')
//第一个多选框全选的赋值
var ins2=document.getElementById('input2')
//反选赋值
var ins3=document.getElementById("allin")
//内容的大盒子赋值
var is=ins3.getElementsByTagName("input")
//内容里具体的多选赋值
for(i=0;i<is.length;i++){
is[i].onclick=function(){
//内容里的多选框点击事件
var sum=0;
for(i=0;i<is.length;i++){
if(is[i].checked){
sum=sum+1;
if(sum==is.length){
ins1.checked=true;
} else{
ins1.checked=false;
}
}
}
}
}
//实现多选全选时下面改动使其多选不选中
ins1.onclick=function(){
//全选的点击事件
if(ins1.checked){
ins2.checked=false;
for(var i=0; i<is.length;i++){
is[i].checked=true;
}
}else{
for(var i=0; i<is.length;i++){
is[i].checked=false;
}
}
}
//实现全选时下面内容全部选中
ins2.onclick=function(){
//反选的点击事件
if(ins2.checked){
ins1.checked=false;
for(var i=0; i<is.length;i++){
if(is[i].checked){
is[i].checked=false;
}else{
is[i].checked=true;
}
}
}else{
for(var i=0; i<is.length;i++){
is[i].checked=false;
}
}
}
//实现反选的事件反向选中没选的，选中的改为没选中
</script>