网购刷平台必备！复选框全选反选妙招大揭秘

你们好！今天，我就来和大家唠叨几句关于复选框的事儿。你们知道吗，无论是网购还是刷各种平台，都离不开复选框这个小东西。那就让我带你瞅瞅我之前编写的2个小demo，肯定能帮到你们滴~

别急先说说复选框全选和反选这事儿。真的特别有用！而且我还增加了一点小功能，当你要是选了下面那个尚品啥的，并且所有复选框都已经点上了的话，那么全选按钮就会自己变成选中的状态啦；反过来也成立。这样以后批量操作就方便多了！

再来说说自定复选框样式，这功能就是牛。可以换上你喜欢的图，让整个页面瞬间变美，而且我用的是纯CSS3代码，完全没用到JS，你想怎改就怎么改，让你的网站个性十足！

    
        
        
        
            td{
                border: 1px solid black;
                text-align: center;
            }
            table{
                border: 1px solid black;
            }
            #opp{
                border-radius: 50%;
                width: 20px;
                height: 20px;
                border: 1px style #eee;
                outline-style: none;
            }
        
    
    
        

            

                
全选
                
复选框全选示例
            
            

                

                

            
            

                

                

            
            

                

                

            
            

                

                

            
            

                

                

            
            

                

                

            
            

                

                

            
            

                
反选
                

            
        
        
                var vll = document.getElementById("all");
                var vlist=document.getElementsByClassName("list");
                var vopp=document.getElementById("opp");
                vll.onclick=function(){ 
                    for(var i=0;i<vlist.length;i++){    
                        vlist[i].checked=vll.checked;
                    }
                }
                for( var i=0;i<vlist.length;i++){
                    vlist[i].onclick=function(){
                        if(this.checked==false){
                            vll.checked=false;  
                            }
                        else{
                            for(var i2=0;i2=vlist.length-1){
                                    vll.checked=true;   
                                }
                            }
                        }
                    }   
                }
                vopp.onclick=function(){
                    for(var i=0;i<vlist.length;i++){
                    vlist[i].checked=!vlist[i].checked;
                        if(vlist[i].checked==false){
                            vll.checked=false;
                        }
                    }
                }
        
    

复选框，你们知道吗？ HTML 里真的离不开它！购物或者做别的事情的时候，用复选框能快速搞定任务，非常方便！所以，学会怎么运用复选框就特别重要！

接下来给你讲几个关于复选框的小妙招。比如，全选或者反选就能很快地选中/取消很多东西哦；自定义下样式，网页效果会变得更漂亮。用了这些招儿，网上冲浪会更顺手，非常实用

复选框，真的太有用了！它让咱们的日常操作变得更方便更快！比如淘宝买东西、朋友圈点赞等等，都离不开这个小透明。所以学好用复选框真心重要！

    
        
        
        
            .box1{
                width: 1000px;
                height: 50px;
                position: relative;
            }
            input{
                width: 50px;
                height: 50px;
                opacity: 1;
                display: none;
            }
            input+label{
                display: block;
                width: 50px;
                height: 50px;
                background: url(img/2.png);
                background-size: 100%;
            }
            input:checked+label{
                background: url(img/1.PNG);
                background-size: 100%;
            }
        
    
    
        

            
            
        
        

            
            
        
        

            
            
        
    

说白了，我这就给你分享几个用复选框的省事儿招儿。比如，你上哪儿找不到全选和反选功能？照着这儿找准没错，它能帮你快速选定或者取消好几个选项。再就是给你的网页搞点儿花样，自己定制个漂亮的style，到时候简直美翻了！我跟你讲，学会这些小窍门，你在网上冲浪的时候效率能提高不少，实在太实用！

那么，大家现在对复选框是不是有所明白？希望通过我今天的话题分享，能够帮到你们。如果还有啥不清楚或者想再了解点儿啥，就给我留言！我会尽力回答的。再次感谢大家对我们网站的支持！今天咱们聊到了复选框在网页设计里头的重要性，还分享了不少实用小技巧和知识点。希望这些都对你们有点儿启发哟。觉得这个文章不错的话，别忘了踩个赞和分享也欢迎你们大家留下宝贵意见，跟我来聊聊天。多谢！