js全选 反选 不选 代码示例。 

//全选 反选 不选可用type=button  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        * {
                padding: 0;
                margin: 0;
            }
            
            .wrap {
                width: 300px;
                margin: 100px auto 0;
            }
            
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                width: 300px;
            }
            
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
            
            th {
                background-color:rgb(51, 199, 18);
                font: bold 16px "微软雅黑";
                color: #fff;
            }
            
            td {
                font: 14px "微软雅黑";
            }
            
            tbody tr {
                background-color: #f0f0f0;
            }
            
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
    </style>
    <body>
        <div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="theadInp" />全选
                        </th>
                        <th>
                            <input type="checkbox" id="closeinput" />全不选
                        </th>
                        <th>
                            <input type="checkbox" id="inrevt" />反选
                        </th>
                        <th>快递</th>
                        <th>收件人</th>
                        <th>电话</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            
                        </td>
                        <td>
                            
                        </td>
                        <td>顺丰</td>
                        <td>张大大</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            
                        </td>
                        <td>
                            
                        </td>
                        <td>韵达</td>
                        <td>张全蛋</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            
                        </td>
                        <td>
                            
                        </td>
                        <td>圆通</td>
                        <td>韩非</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            
                        </td>
                        <td>
                            
                        </td>
                        <td>中国邮政</td>
                        <td>卫庄</td>
                        <td>186*****897
                    </tr>
                </tbody>
            </table>
        </div>
    <script type="text/javascript">
        window.onload=function(){
            var allinput=document.getElementById("theadInp");
            var closeinput=document.getElementById("closeinput");
            var inputinrevt=document.getElementById("inrevt");
            var inputpt=document.getElementById("tbody");
            var inputlist=inputpt.getElementsByTagName("input");
            
//          监听全选
            allinput.onclick=function(){
                for (var i=0;i<inputlist.length;i++) {
                    inputlist[i].checked=this.checked;
                    if (this.checked==true) {
                        closeinput.checked=false;
                        inputinrevt.checked=false;
                    }
                }
            }
//          全不选
            closeinput.onclick=function(){
                for (var i=0;i<inputlist.length;i++) {
                    inputlist[i].checked=false;
                    if (this.checked==true) {
                        allinput.checked=false;
                        inputinrevt.checked=false;
                    }
                }
            };
//          反选
            inputinrevt.onclick=function(){
                var  index=0;
                closeinput.checked=false;
                allinput.checked=false;
                for (var i=0;i<inputlist.length;i++) {
//                  allinput.checked=true;
//                  获取选中js数
                    if (inputlist[i].checked==true) {
//                      index++;
//                      if (index==inputlist.length) {
//                          allinput.checked=false;
//                      }else{
//                          allinput.checked=true;
//                      }
                        inputlist[i].checked=false;
                    } else{
                        inputlist[i].checked=true;
                    }
                    
                }
            }
            //取消其中一个
            for(var i=0;i<inputlist.length;i++){
                inputlist[i].onclick=function(){
                    var flag=true;
                    for (var j=0;j<inputlist.length;j++) {
                        if (inputlist[j].checked==false) {
                            flag=false;
                            break;
                        }
                    }
                    console.log(flag)
                    allinput.checked=flag;
                }
            }
            
        }
    </script>    
    </body>
</html>

 

posted @ 2019-02-26 11:10  独孤白菜  阅读(191)  评论(0)    收藏  举报