チェックボックスの選択またはキャンセルを実装するJavaScript

この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

実装のアイデア

1. 選択ボックス全体とすべての小さな選択ボックス要素オブジェクトを取得します。
2. ボタンコントロールの小さなボタン - onclick イベントをメインチェックボックスにバインドし、イベントハンドラー - for ループですべての小さなチェックボックスを反復処理し、メインチェックボックスのチェックされた属性値をそれらに割り当てます。
3. 小さいボタンはメインボタンに影響します - - - for ループはクリックイベントを各小さいチェックボックスにバインドし、クリックごとに for ループ内のすべてのチェックボックスが選択されているかどうかを確認します。
メインボタンの選択状態を制御するために変数フラグを設定します。初期値は true です。for ループは反復して、各小さなチェックボックスの選択状態をチェックします。1 つが選択されていない限り、flag = false となり、break はループから抜け出し、後続の小さなチェックボックスの状態をチェックしなくなります。最後に、メインボタンのチェック済み属性値 = flag になります。

注: HTML では、選択状態はチェック済み = "チェック済み" ですが、JS では、選択状態は - - - チェック済み = true、未チェック状態は - - - チェック済み = false です。

提案:この種の属性値の場合、コンソールに出力して値を確認することができます。

コードサンプル

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>複数選択ボックス</title>
    <スタイル>
        。箱 {
            幅: 300ピクセル;
            マージン: 100px 自動;
        }
        
        スレッド {
            色: #fff;
            背景色: #008dd0;
        }
    </スタイル>
</head>

<本文>
    <div class="box">
        <表の境界線="1" セル間隔="0" セルパディング="5" 幅="200" 位置合わせ="中央">
            <頭>
                <tr>
                    <th><input type="checkbox" value="0" id="cbAll"></th>
                    <th>スポーツ</th>
                </tr>
            </thead>
            <tbodyid="tb">
                <tr>
                    <td><入力タイプ="チェックボックス" 値="1"></td>
                    <td>実行中</td>
                </tr>
                <tr>
                    <td><入力タイプ="チェックボックス" 値="2"></td>
                    <td>縄跳び</td>
                </tr>
                <tr>
                    <td><入力タイプ="チェックボックス" 値="3"></td>
                    ヨガ
                </tr>
                <tr>
                    <td><入力タイプ="チェックボックス" 値="4"></td>
                    <td>水泳</td>
                </tr>
                <tr>
                    <td><入力タイプ="チェックボックス" 値="5"></td>
                    サイクリング
                </tr>
            </tbody>
        </テーブル>
    </div>

    <スクリプト>
        var all = document.querySelector('#cbAll');
        var スポーツ = document.querySelector('#tb').querySelectorAll('input');

        // クリックイベントをすべて選択ボタンにバインドします all.onclick = function() {
            console.log(すべてチェック済み);
            (var i = 0; i < sports.length; i++) の場合 {
                スポーツ[i].checked = all.checked;
            }
        }

        // クリックイベントを各小さなチェックボックスにバインドします for (var i = 0; i < sports.length; i++) {
            スポーツ[i].onclick = 関数() {
                // すべて選択ボタンが選択されているかどうかを制御します var flag = true;
                // 小さなボックスがクリックされるたびに、すべてのチェックボックスがチェックされているかどうかを確認します (var i = 0; i < sports.length; i++) {
                    スポーツ[i]がチェックされている場合
                        フラグ = false;
                        break; // 小さなチェックボックスが 1 つ選択されていない限り、[すべて選択] ボタンは選択されず、ループから抜け出すことができます。次の小さなチェックボックスは再度判断する必要はありません。}
                }
                all.checked = フラグ;
            }
        }
    </スクリプト>
</本文>

</html>

ページ効果: