js 反选全选看出你处于哪个阶段！

说实话，挺喜欢写这样的小项目的，这种东西能够有利于新人的很好成长，自己喜欢，就留笔一个吧。

其实这几个人对于新人而言，最重要的就是从外面定的信号量，可以说这种东西我感觉不管在小项目还是大项目，都能衍生出很大的想法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>信号量的重要性</title>
    </head>
    <body>
        <div id="inpputBox">
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
        </div>
        <button type="button" id="inputBtn">全选</button>
        <script type="text/javascript">
            
            var btn=document.getElementById("inputBtn");
            var inputBox=document.getElementById("inpputBox");
            var inputList=inputBox.getElementsByTagName("input");
            
//            第一阶段
            var idx=0;
            
            btn.onclick=function(){
               if (idx==0) {
                       for (var i=0;i<inputList.length;i++) {
                           inputList[i].checked="checked";
                    }
                       btn.innerHTML="全不选";
                       idx=1;
               } else{
                       for (var i=0;i<inputList.length;i++) {
                           inputList[i].checked="";
                    }
                       btn.innerHTML="全选";
                       idx=0;
               }
            }
            
//            第二阶段
            var idx=0;
            
            btn.onclick=function(){
                    idx=idx== 0 ? 1 : 0 ;
                var state=idx== 0 ? "" : "checked" ;
                var thisValue=idx== 0 ? "全选" : "全不选" ;
                 
                for (var i=0;i<inputList.length;i++) {
                    inputList[i].checked=state;
                    btn.innerHTML=thisValue;
                }
                
            }
            
            
//            第三阶段
            var idx=false;
            
            btn.onclick=function(){
                    idx=!idx;
                var thisValue=idx== 0 ? "全选" : "全不选" ;
                for (var i=0;i<inputList.length;i++) {
                    inputList[i].checked=idx;
                    btn.innerHTML=thisValue;
                }
                
            }
        </script>
    </body>
</html>

js 反选 全选看出你处于哪个阶段！

猜你喜欢

js 反选全选看出你处于哪个阶段！