JavaScript 表单全选

今天学到了一个有趣的例子，在一个表单里，左边都是选框，若点击第一个全选的框，下面所有框会自动选中，若取消其中一个，全选框也会显示为选中状态。反之若选中所有非全选的框，全选框也会自动选中。先通过一个GIF图了解下相关效果。

HTML结构与css样式就不细说了，直接上代码

HTML结构

用table书写，

    <div class="warp">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="AllSelect" >
                        <!-- <input type="checkbox" id="AllSelect" checked="checked"> checked="checked"  显示勾选状况 -->
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone </td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 7</td>
                    <td>4000</td>
                    </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone 2</td>
                    <td>000</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS

    <style>
        .warp{
            text-align: center;
            position: relative;
        }
    table{
        
        width: 200px;
        position: absolute;
        border-collapse: collapse;
        top: 100px;
        left: 400px;
        
    }
    table td,table th{
        border: 1px solid blue;
        color: #666666;
        height: 30px
        
    }
    table thead th{
        background-color: pink;
        width: 100px
    }
   /* 鼠标移入样式*/
    .bg{
        background-color: yellowgreen
    }
    </style>

样式与结构都分享完了，下面说说交互方面的。

1.首先是惯例的获取元素。有三种方式，如：

document.querySelector('e');单个元素，括号里可以是"#id，.class，tagName";

document.getElementById（"id");document.getElementsByClassName("class")[0];document.getElementsByTagName("div");

jqueryx写法：$（“css选择器”）。

下面说下本次例子的元素获取

        var AllSelect=document.getElementById('AllSelect');
        var tb=document.getElementById('tb').getElementsByTagName('input');
        var trs=document.querySelector('tbody').querySelectorAll('tr');

2.获取完相关元素，下面就是给这些元素绑定事件了。绑定事件有三种方式：

2.1传统绑定事件：

e.onclick=function(){
　　　　//函数体
　　} 

2.2 事件监听

//IE9以上支持
e.addEventListener('click',function(){
            //函数体
        })

2.3IE9以下低级浏览器支持的事件监听

 e.attachEvent('onclick',function(){
            //函数体
        })

注：眼力好的同学可以看看这三种方式的些许差别

本次主要用到onclick点击事件、onmouseover鼠标移入事件和onmouseout鼠标移出事件，用传统方式编程

e.onclick=function(){
　　　　//函数体
　　}    
e.onmouseover=function(){  

　　　　//函数体
　　} 

e.onmouseout=function(){  

　　　　//函数体
　　} 

完整js部分代码

    <script>
        //获取元素

        var AllSelect=document.getElementById('AllSelect');
        var tb=document.getElementById('tb').getElementsByTagName('input');
        var trs=document.querySelector('tbody').querySelectorAll('tr');
        //注册事件
        
       // 鼠标点击事件
        AllSelect.onclick=function(){
            //console.log(this.checked);
            //this.checked 可以获知当前复选框的状况，选中为true，未选中为false
            //for 循环实现全选，当点击全选框时，下面复选框全部勾选
            for( var i=0;i<tb.length;i++){
                tb[i].checked=this.checked;
            }
        }
        //单个框选中点击事件
         for(var i=0;i<tb.length;i++){
            tb[i].onclick=function(){
                var flag=true;
                for(var i=0;i<tb.length;i++){
                    if(! tb[i].checked){
                       flag=false;
                       break;
                    }
                }
                AllSelect.checked=flag;
            }
        }

        for(var j=0;j<trs.length;j++){
            trs[j].onmouseover=function(){
                //console.log(1111);
                this.className='bg';
            }
            trs[j].onmouseout=function(){
                //console.log(1111);
                this.className='';
            }
        }
    </script>