JS - 全選挙、抗選挙をチェックし、子供の親のチェックボックスの状態を変更するには、チェックボックスをクリックしてください

ここでは、ここで特定のテーブルを含む小さな場合は、CSSスタイル造園を書いていないアイデアやコードのJS JS簡単な実現を学ぶことによって、私の基本的な使用です。

チェックボックスの親状態をするときクリック

全てのサブチェックボックスを選択すると、チェックボックス親はまた、状態を対応する変更します

クリックすると、選択されていない状態を提示した後、

 

具体的なコードは次のよう：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
        。
        } 
    </ スタイル> 
</ ヘッド> 
< ボディ> 
    < DIV クラス= "反り" > 
        < テーブル境界= "1" > 
            < THEAD > 
                < TR > 
                    < 目> < 入力タイプ= "チェックボックス" ID = "j_cbAll"  / > </ 番目> 
                    < 目>商品</ 番目> 
                    < 目>价钱</ 番目>
                </ TR > 
               
            </THEAD > 
            < TBODY ID = "j_tb" > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス"  /> 
                    </ TD > 
                    < TD > iPhone8 </ TD > 
                    < TD > 8000 </ TD > 
                </ TR > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス"  /> 
                    </ TD >
                    < TD >iPadはプロ</ TD > 
                    < TD > 5000 </ TD > 
                </ TR > 
                < TR > 
                    < TD > 
                        < 入力タイプ= "チェックボックス"  /> 
                    </ TD > 
                    < TD > iPhone11 </ TD > 
                    < TD > 10000 < / TD > 
                </ TR > 
            </ TBODY > 
        </ テーブル> 
        <入力タイプ=「ボタン」値= "反転" 上記のID = "BTN" > 
    </ divの> 
    < スクリプトSRC = "common.js" > </ スクリプト> 
   < スクリプト> 
       // ときのハンディキャップの1は、すべて選択ボタン（親チェックボックス）をクリックしますチェックボックスは、チェックボックスの父親との整合性を維持するために選択されている
             // 1.1親のチェックボックス登録クリックイベントの取得
           VARをj_cbAll = マイ$（「j_cbAll 」）;
            VARのcheckboxs = （document.querySelectorAll 「[タイプ=チェックボックスの] INPUT #j_tb 」）; 
           j_cbAll .onclick =  機能（）{
              // 選択された2.2プロモーターのチェックボックスは、親のチェックボックスと一致したままよう
            // 得る全てのサブチェックボックス
             VAR I =  0 、LEN = checkboxs.length;
              のために（; I < lenは、I ++ ）{
                  / / 各チェックボックスを取得
                 するvar チェックボックスを= checkboxs [I];
                  // 各チェックボックスのチェックボックスの状態が確認作り、親は一貫性が保た
                 checkbox.checked =  この.checkedを; 
             } 

           } 
           
       // すべてのサブチェックボックスのクリックイベント登録に2、上のクリック子チェックボックスのチェックボックスの親を変更するあなたは息子のチェックボックスがチェックされていない持っている場合は、親がチェックボックスを選択することはできません
       // 全ての登録チェックボックスクリックイベントに2.1 
       

        VAR I =  0 、LEN = checkboxs.length;
         のための（; I < lenは、I ++ ）{
             VAR チェックボックス= checkboxs [I];
             // 登録クリックイベント
            checkbox.onclick =  関数（）{
                 // 2.2サブチェックボックスがチェックされていないが存在する場合、親がチェックボックスも選択されない
                // 全てのサブチェックボックスが選択されていることを前提と
                varはisAllCheked =を trueに、
                 のためには、（私は=  0 ; I < LEN、I++ ）{
                     // 各サブの取得、チェックボックス
                    のチェックボックス= checkboxs [I];
                     //は、選択した分析
                    IF （！Checkbox.checkedを）
                    { 
                        // チェックボックスが偽= isAllCheckedに設定がチェックされていない場合は
                        isAllCheked =  falseに、
                         BREAK ; 
                    } 
                } 
                // チェックボックス親の選択状態に設定
                j_cbAll.checked = isAllChekedを; 
            } 
        } 
       
       // 3非選択
       @選択されていないボタンのクリックイベント登録に3.1 
       私の$（' BTN ' ）.onclick =  関数（）{
            // 全てに対して3.2チェックボックス選択し、選択したサブ抗
           ために（私は=  0 ;私は< LEN; I ++ ）{
                VARをチェックボックス= checkboxs [I];
                // 逆
                checkbox.checked =  ！checkbox.checked; 
           } 
       } 
       
   </ スクリプト>  
</ ボディ> 
</ HTML >