首页 > 代码库 > 实现全选和反选的效果代码

实现全选和反选的效果代码

2024-09-06 11:41:08   218人阅读

<!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>

 

实现全选和反选的效果代码


联系
我们