JavaScript Form Select

Today learned an interesting example, in a form where all the left box, if you click Select All first box, the box automatically selected all of the following, if canceled one of them, the whole box will appear selected . On the contrary, if all non-select all the boxes checked, the whole box will be automatically selected. First through the next chart GIF understanding of the relevant results.

HTML structure and css styles not elaborate, directly on the code

HTML structure

With writing 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>

Style and structure have shared over, here to talk about the interactive experience.

1. The first is the practice of obtaining elements. There are three ways, such as:

document.querySelector ( 'e'); single element, brackets may be "# id, .class, tagName";

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

jqueryx writing: $ ( "css selector").

The next element to obtain said the following example

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

2. complete access to relevant elements, the following is to give these elements a binding events. There are three ways to bind events:

2.1 traditional binding events:

= e.onclick function () {
　　　　// function body 
　　}

2.2 Event Listeners

// IE9 above support 
e.addEventListener ( 'the Click', function () {
             // function body 
        })

2.3IE9 the following low-level browsers support event listeners

e.attachEvent ( 'the onclick', function () {
             // function body 
        })

Note: Students with good eyesight can see little difference among these three types

The main use of the click event onclick, onmouseover and onmouseout events into mouse mouse out events, with the traditional way of programming

= function e.onclick () { 
　　　　// function body 
　　}     
e.onmouseover = function () {  

　　　　// function body 
　　}

e.onmouseout=function(){  

　　　　// function body 
　　}

Complete js part of the code

    <Script>
         // Get element 

        var AllSelect = document.getElementById ( 'AllSelect' );
         var TB = document.getElementById ( 'TB') the getElementsByTagName ( 'INPUT'. );
         var TRS = document.querySelector ( 'tbody'). querySelectorAll ( 'TR' );
         @ registration event 
        
       // mouse click 
        AllSelect.onclick = function () {
             // console.log (this.checked); 
            // this.checked be informed of the current state of the checkbox, select is true, is not selected to false 
            // for election cycle to achieve full, full checkbox when clicking, following all the check boxes checked 
            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>