JavaScriptのフォームを選択

今日は興味深い例を学び、すべての左のボックスで、すべての最初のボックスを選択してクリックすると、ボックスが自動的に以下のすべてを選択した形で、そのうちの一つをキャンセルした場合、全体のボックスが選択され表示されます。すべての非選択すべてのボックスをチェックすると逆に、全体のボックスが自動的に選択されます。まず、関連性の高い結果の次のチャートGIF理解を通して。

HTMLの構造とCSSのスタイルは、コードの上に直接、手の込んだありません

HTML構造

ライティングテーブルでは、

    < divのクラス= "ワープ" > 
        < 表> 
            < THEAD > 
                < TR > 
                    < 目> 
                        < 入力タイプ= "チェックボックス" ID = "AllSelect"  > 
                        <！ - 確認の<input type = "チェックボックス" ID = "AllSelect" = "確認">確認= "確認"显示勾选状况- > 
                    </ 目> 
                    < 目>商品</ 目> 
                    < 目>价钱</ 目>
                </ TR > 
            </ THEAD >
            < TBODYのID = "TB" > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス" > 
                    </ TD > 
                    < TD > iPhone 8 </ TD > 
                    < TD > 8000 </ TD > 
                </ TR > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス" > 
                    </ TD > 
                    <TD > iphone </TD > 
                    < TD > 5000 </ TD > 
                </ TR > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス" > 
                    </ TD > 
                    < TD > iPhone 7 </ TD > 
                    < TD > 4000 </ TD > 
                    < / TR > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス"> 
                    </ TD> 
                    < TD > iPhone 2 </ TD > 
                    < TD > 000 </ TD > 
                </ TR > 
            </ TBODY > 
        </ テーブル> 
    </ DIV >

CSS

    <スタイル> 
        .warp { 
            テキスト整列：センター。
            位置：相対 ; 
        } 
    テーブル { 
        
        幅：200pxの。
        位置：絶対 ; 
        国境崩壊：崩壊。
        トップ：100ピクセル ; 
        左：400ピクセル ; 
        
    } 
    テーブルTD、第テーブル { 
        ボーダー：1ピクセルの青色固体。
        色：＃666666 ; 
        高さ：30px
        
     } 
    番目テーブルTHEAD { 
        背景色：ピンク。
        幅：100pxに
     }
    / * 鼠标移入样式* / 
    .bg { 
        背景色：黄緑色
     } 
    </スタイル>

スタイルと構造はインタラクティブな体験について話をここで、オーバー共有しています。

1.最初の要素を取得するの実践です。次のような3つの方法がありますが、

document.querySelector（E ''）;単一の要素、ブラケットは "＃IDは、.classファイル、tagNameを" であってもよいです。

document.getElementById（ "ID"）; document.getElementsByClassName（ "クラス"）[0]; document.getElementsByTagName（ "DIV"）。

jqueryx書き込み：$（ "CSSセレクタ"）。

得るための次の要素は、以下の例で述べました

        VAR AllSelect =のdocument.getElementById（ 'AllSelect' ）;
        VaRの TB =のdocument.getElementById（ 'TB'）getElementsByTagNameの（ '入力'。 ）。
        VaRの TRS = document.querySelector（ 'TBODY'）querySelectorAll（ 'TR'）。

関連する要素へ2.完全なアクセスは、以下では、これらの要素に結合事象を与えることです。イベントをバインドする方法は3つあります。

2.1伝統的な結合事象：

= e.onclick 関数（）{
　　　　// 関数本体 
　　}

2.2イベント・リスナー

支持体上// IE9 
e.addEventListener（ 'クリック'、関数（）{
             // 関数本体 
        }）

2.3IE9以下の低レベルのブラウザでは、イベントリスナーをサポート

e.attachEvent（ 'のonclick'、関数（）{
             // 関数本体 
        }）

注意：良い視力を持つ学生は、これらの3種類の中の小さな違いを見ることができます

プログラミングの伝統的な方法でクリックイベントの主な用途onclickの、のonmouseoverイベントれるonmouseoutマウスマウスアウトイベントに、

=関数e.onclick（）{ 
　　　　//関数本体
　　}     
e.onmouseover =関数（）{  

　　　　//関数本体
　　}

e.onmouseout =関数（）{  

　　　　//関数本体
　　}

コードの完全なjsの一部

    <SCRIPT>
         // 要素の取得

        VAR AllSelect =のdocument.getElementById（ 'AllSelect'を）;
         VARの TB =のdocument.getElementById（ 'TB'）getElementsByTagNameの（ 'INPUT'。）;
         VARの TRS = document.querySelector（ 'TBODYを'）。 querySelectorAll（ 'TR' ）;
         @ 登録イベント
        
       // マウスがクリック 
        AllSelect.onclick = 機能（）{
             // はconsole.log（this.checkedを）; 
            // this.checkedチェックボックスの現在の状態が通知され、選択します、falseに真の選択されていないされて
            // クリックしたときの選挙サイクルはフル、フルチェックボックスを達成するためにチェックすべてのチェックボックス以下、
            のために（VAR I = 0;私はtb.lengthを<;私は++ ）{
                TB [i]が.checkedを ; 
                    } 
                }= これは.checkedを。
            } 
        } 
        // 单个框选中点击事件
         のための（VAR i = 0; iはtb.lengthを<; iは++ ）{ 
            TB [i]を.onclick = 関数（）{
                 VARのフラグ= 真。
                用（VAR i = 0; iはtb.length <; iは++ ）{
                     場合（！{TB [I] .checkedを）
                       フラグ = 偽。
                       壊れ
                AllSelect.checked = フラグ。
            } 
        } 

        のための（VARの J = 0; J <trs.length; J ++ ）{ 
            TRS [J] .onmouseover = 関数（）{
                 // はconsole.log（1111）。
                この .className = 'BG' ; 
            } 
            TRS [J] .onmouseout = 関数（）{
                 // はconsole.log（1111）。
                この .className = '' ; 
            } 
        }
     </ SCRIPT>