JavaScriptのWeb APIを逆のケースを選択

その他 2019-06-04 08:25:53 訪問数: null

逆のものを選択します

アプリケーション開発における選択し、逆関数は、Select逆関数を達成するためのJSを使用する方法を学ぶ、非常に分解してケースを、以下のことが言えます。

この機能は、以下の3つのステップに分けることができます。

1. [

1.1イベント登録をクリックして、親のチェックボックスを取得

1.2全てのサブチェックボックス、親のチェックボックスと一致し、すべてのサブ状態のチェックボックスを取得

 

HTMLとCSSコード

<スタイル> 
    * { 
        パディング： 0 ; 
        マージン： 0 ; 
    } 

    .wrap { 
        幅：300ピクセル。
        マージン：100pxに自動 0 ; 
    } 

    テーブル{ 
        ボーダー - 崩壊：崩壊。
        国境 -spacing：0 ; 
        国境：1pxの固体＃1 C0C0C0; 
        幅：300ピクセル; 
    } 

    番目、
    TD { 
        ボーダー：1ピクセル固体＃1 d0d0d0。
        色：＃ 404060 ; 
        パディング：10pxの; 
    } 

    番目の{ 
        背景 -色：＃の09C; 
        フォント：太字に16px "微软雅黑" 。
        色：#FFF; 
    } 

    TD { 
        フォント：14px "微软雅黑" 。
    } 

    のTBODY TR { 
        背景 - 色：＃f0f0f0。
    } 

    TBODY TR：ホバー{ 
        カーソル：ポインタ。
        背景 - 色：#fafafa。
    }
 </スタイル> 

<DIV CLASS = "ラップ"> 
    <TABLE> 
        <THEAD> 
            <TR> 
                <TH> 
                    の<input type = "チェックボックス" ID = "j_cbAll" 
                <TH>价钱</番目> 
            </ TR> 
        </ THEAD> 
        <TBODY ID = "j_tb"> 
            <TR> 
                <TD> 
                    の<input type = "チェックボックス" /> 
                </ TD > 
                <TD>小米Mix2s </ TD> 
                <TD> 3000 </ TD> 
            </ TR> 
            <TR> 
                <TD> 
                    の<input type = "チェックボックス" /> 
                </ TD> 
                <TD>华为P30 </ TD> 
                <TD> 3800 </ TD>
            </ TR> 
            <TR> 
                <TD> 
                    の<input type = "チェックボックス" />
                </ TD>  
                <TD> iPadの航空</ TD>
                <TD> 2000 </ TD> 
            </ TR> 
            <TR> 
                <TD> 
                    の<input type = "チェックボックス" /> 
                </ TD> 
                <TD>小米手环</ TD> 
                <TD> 200 < / TD> 
            </ TR> 

        </ TBODY> 
    </ TABLE> 
    の<input type = "ボタン"値= "反选"ID =" BTN"> 
</ div>

 

// 1、選択
// 親のCheckBoxを、子のCheckBox 
// 1.1 CheckBoxの親取得し、登録をクリックしてイベントの
VAR j_cbAll =のdocument.getElementById（ 'j_cbAll' ）; 
j_cbAll.onclick = 機能（）{
     // 1.2は、すべてのサブを取得しますチェックボックス、すべてのサブ状態のチェックボックスのチェックボックスが親と一致している
    のvar j_tb =のdocument.getElementById（「j_tb」）;
     VAR入力= j_tb.getElementsByTagName（「INPUT」）;
     // 反復、すべてのサブ状態のチェックボックスは、父親と変更しますチェックボックスの一貫性のある状態
    のために（VAR ; Iはinputs.lengthを<I ++はI = 0 ）{
         VARの INPUT = 入力[I];
         IF（input.type ===「チェックボックス」）{
             // 親チェックボックスの状態と一致するサブチェックボックス状態 
            input.checkedは= これは.checkedを; 
        } 
    } 
}

サブチェックボックスがある場合、すべてのサブチェックボックスは、親のチェックボックスを選択し、選択された場合、子供は、チェックボックスをクリックする2は、チェックされていない、親のチェックボックスがチェックされていません

（1）]チェックボックスをオンにするかどうかを決定するサイクルを、そうであれば、イベント登録をクリックしてください

選択された場合、サブチェックボックスがあるかどうかを確認するために、親のチェックボックスの状態がチェックされていない（2）ボタンをクリックすると、子のチェックボックスのすべてが選択されているかどうか、親のチェックボックスがセットにチェックされていません

次のコードは、以下を含む第一のコード部分に基づいて、第1のステップで記述されています

VaRの j_tb =のdocument.getElementById（ 'j_tb' ）;
 VARの入力= j_tb.getElementsByTagName（ 'INPUT' ）;
 VAR j_cbAll =のdocument.getElementById（ 'j_cbAll' ）;
 // 1、選択
// 親のチェックボックス、子チェックボックス
/ / 1.1は、親のチェックボックス、登録クリックイベントの取得
VAR j_cbAll =のdocument.getElementById（「j_cbAll」を）; 
j_cbAll.onclick = 機能（）{
     // 親のチェックボックスを持つすべてのサブチェックボックスの状態が一貫しているので1.2には、すべてのサブ]チェックボックスを取得します

    / / トラバース、親チェックボックスと一致する状態にすべてのサブチェックボックスの状態
    のために（VARの I = 0;私はinputs.lengthを<; Iは++ ）{
         VAR= INPUT 入力[I];
         IF（input.type === 'チェックボックス' ）{
             // 親チェックボックスの状態と一致するサブチェックボックス状態 
            input.checked = この.checkedを; 
        } 
    } 
} 

// 1.3子がありますチェックボックスがチェックされていない場合、すべてのサブチェックボックスが選択された場合、親のチェックボックスは、選択されるべきではない、親のチェックボックスを選択しなければならない
// 各サブ登録イベントチェックボックスに
するための（VAR I = 0;私はinputs.lengthを<; Iは++ ）{
     VAR INPUT = 入力[I];
     // そうでない場合は、チェックボックス、イベントがバインドされていない
    のIF（！input.type == 'のチェックボックス' {）が
         続行;
    }
    input.onclick =関数（）{
         //はすべてのサブチェックボックスを想定選択ともに
        VAR allChecked = trueに; 
        にconsole.log（入力）; 
        //は、チェックボックスがすべてのサブ選択するか否かを判断する
        ための（VARの J = 0; J <inputs.length; J ++ ）{
             VAR = INPUT 入力[J];
             // そうでない場合、チェックボックス、書き込みサイクルはスキップ
            IF（input.type ==]チェックボックス'！{）
                 続行; 
            } 
            IF（！input.checked）{ 
                allChecked = falseに ; / / あなたが選択していない場合
                BREAKを。
            } 
        } 

        // 同期親ステータスサブチェックボックスやチェックボックス 
        j_cbAll.checked = allChecked; 
    } 
}

3、抗選挙

あなたがクリックすると、すべてのサブの反転選択ボタン、チェックボックスの状態は否定して、チェックボックスの親状態を同期させます。次のコードは、第二のステップは、コードを含む第2の部分に基づいて書かれています 

VaRの j_tb =のdocument.getElementById（ 'j_tb' ）;
 VARの入力= j_tb.getElementsByTagName（ 'INPUT' ）;
 VAR j_cbAll =のdocument.getElementById（ 'j_cbAll' ）;
 // 1、選択
// 親のチェックボックス、子チェックボックス
/ / 1.1は、親のチェックボックス、登録クリックイベントの取得
VAR j_cbAll =のdocument.getElementById（「j_cbAll」を）; 
j_cbAll.onclick = 機能（）{
     // 親のチェックボックスを持つすべてのサブチェックボックスの状態が一貫しているので1.2には、すべてのサブ]チェックボックスを取得します

    / / トラバース、親チェックボックスと一致する状態にすべてのサブチェックボックスの状態
    のために（VARの I = 0;私はinputs.lengthを<; Iは++ ）{
         VAR= INPUT 入力[I];
         IF（input.type === 'チェックボックス' ）{
             // 親チェックボックスの状態と一致するサブチェックボックス状態 
            input.checked = この.checkedを; 
        } 
    } 
} 

// 1.3子がありますチェックボックスがチェックされていない場合、すべてのサブチェックボックスが選択された場合、親のチェックボックスは、選択されるべきではない、親のチェックボックスを選択しなければならない
// 各サブ登録イベントチェックボックスに
するための（VAR I = 0;私はinputs.lengthを<; Iは++ ）{
     VaRの INPUT = 入力[I];
     // そうでない場合は、チェックボックス、イベントがバインドされていない
    のIF（！input.type == 'のチェックボックス' {）が
         続行します; 
    }
    input.onclick =関数（）{ 
        checkAllCheckBox（）; 
    } 
} 

// 2、非選択
// 1、登録イベントの選択を解除するためのボタン
のvar BTN =のdocument.getElementById（ 'BTN' ）; 
btn.onclick = 関数（）{
     ために（VAR I = 0 ; Iはinputs.lengthを<; Iは++ ）{
         VARの INPUT = 入力[I];
         // 2、かどうかチェックボックスを判断する
        のiF！（input.type ==]チェックボックス' ）{
             続行; 
        } 
        // 。3、すべてのサブへチェックボックスを選択されていない 
        ！input.checked = input.checked; 
    }

    @ 問題：チェックボックスをチェックするか、すべての子をキャンセルした場合、親がチェックボックスの状態は変更しない
    // 4を、状態の決意の親のチェックボックス親子状態の同期状態のチェックボックス
    checkAllCheckBox（）; 

} 


// パッケージの娘と親のチェックボックスのチェックボックス状態同期
機能checkAllCheckBox（）{
     // すべてのサブチェックボックスを想定両方が選択されている
    VAR allChecked =をtrueに、
     //は、チェックボックスがすべてのサブ選択するか否かを判断する
    ための（VARの J = 0; J <inputs.length; J ++ ）{
         VARの INPUT = 入力[J];
         // そうでない場合は、チェックボックス、無結合事象
        のIF（input.type == 'チェックボックスが'！）{
             続行（！。
        } 
        IF {）input.checked 
            allChecked = falseに ; // 選択されていない場合
        } 
    } 
    // 同期親子チェックボックスのチェックボックスの状態 
    j_cbAll.checked = allChecked; 
}

選択し、逆概要：

イベントを登録するための選択ボタンを反転させる1、

図2に示すように、それはチェックボックスか否かを判断します

3、選択されていないすべてのサブチェックボックスに

図4は、状態同期状態サンズチェックボックスに応じて、チェックボックスの親の状態を判定する

おすすめ

転載: www.cnblogs.com/liout/p/10971233.html
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com