JavaScript はチェックボックスの選択機能を実装します

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

コード：

<!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ピクセル;
            境界線の間隔: 0;
            /* テキスト配置: 中央; */
            マージン: 100px 自動;
            境界線の折りたたみ: 折りたたみ;
        }
        
        テーブル tr:nth-child(n+2)>td {
            テキスト配置: 左;
            背景色: rgb(250, 245, 245);
            色: ダークグレー;
            フォントサイズ: 14px;
        }
        
        テーブルtr:n番目の子(1) {
            背景色: スカイブルー;
            色: 白;
        }
        
        番目、
        td {
            パディング: 10px;
            境界線: 0.5px グレー
        }
    </スタイル>
</head>

<本文>
    <テーブル>
        <tr>
            <th><input type="checkbox" name="" id="all"></th>
            <th>製品</th>
            <th>価格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="ip8"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="pro"></td>
            iPadプロ
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="air"></td>
            iPad Air
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id="watch"></td>
            <td>アップルウォッチ</td>
            <td>2000</td>
        </tr>
    </テーブル>

    <スクリプト>
        var all = document.getElementById('all');
        var items = document.querySelectorAll('tr>td>input');
        all.onclick = 関数() {
            (var i = 0; i < items.length; i++) {
                項目[i].checked = this.checked;
            }
        }


        (var i = 0; i < items.length; i++) {
            アイテム[i].onclick = 関数() {
                var flag_all = 1;
                (var j = 0; j < items.length; j++) {
                    （items[j].checked == 0）の場合{
                        フラグ全て = 0;
                        すべてチェック済み = flag_all;
                        壊す;
                    }
                }
                すべてチェック済み = flag_all;
            }
        }
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: