实现全选和反选的效果代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现全选和反选的效果代码相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于实现全选和反选的效果代码的主要内容，如果未能解决你的问题，请参考以下文章