すべてまたは逆の選択機能を実現するJavaScript

すべてまたは逆の選択機能を実現するJavaScript

この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コードは次のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ケース - すべてのテーブルを選択</title>
    <スタイル>
        テーブル {
            境界線: 1px 実線;
            マージン: 自動;
            幅: 500ピクセル;
        }

        td、th {
            テキスト配置: 中央;
            境界線: 1px 実線;
        }

        。外 {
            背景色: 白;
        }

        。以上 {
            背景色: ピンク;
        }
        div{
            上マージン: 10px;
            テキスト配置: 中央;
        }
    </スタイル>
    <スクリプト>
        window.onload = 関数(){
            //すべて選択 document.getElementById("checkAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                (var i = 0; i < cbs.length; i++) の場合 {
                    cbs[i].checked = true;
                }
            }
            //すべてチェックを外す document.getElementById("unCheckAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                (var i = 0; i < cbs.length; i++) の場合 {
                    cbs[i].checked = false;
                }
            }
            //再チェック document.getElementById("reCheck").onclick = function () {
                var cbs = document.getElementsByName("cb");
                (var i = 0; i < cbs.length; i++) の場合 {
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //マウスが通過すると色が変わります var trs = document.getElementsByTagName("tr");
            (var i = 0; i < trs.length; i++) の場合 {
                trs[i].onmouseover = 関数 () {
                    this.className = "以上";
                }
                trs[i].onmouseout = 関数 () {
                    this.className = "out";
                }
            }

            //一番上のチェックボックスをオンにしてすべてを選択します document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                (var i = 0; i < cbs.length; i++) の場合 {
                    cbs[i].checked = this.checked;
                }
            }

        }

    </スクリプト>
</head>
<本文>
<テーブル>
    <caption>学生情報フォーム</caption>
    <tr>
        <td><input type="checkbox" name="cb" id="firstCb"></td>
        <td>番号</td>
        <td>名前</td>
        <td>性別</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><入力タイプ="チェックボックス" 名前="cb"></td>
        <td>1</td>
        <td>リンフー・チョン</td>
        <td>男性</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td>
    </tr>

    <tr>
        <td><入力タイプ="チェックボックス" 名前="cb"></td>
        <td>2</td>
        <td>放して</td>
        <td>男性</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td>
    </tr>

    <tr>
        <td><入力タイプ="チェックボックス" 名前="cb"></td>
        <td>3</td>
        <td>岳部群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">削除</a></td>
    </tr>
</テーブル>
<div>
    <input type="button" value="すべて選択" id="checkAll">
    <input type="button" value="すべてチェックを外す" id="unCheckAll">
    <input type="button" value="再チェック" id="reCheck">
</div>


</本文>
</html>

運用結果

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

以下もご興味があるかもしれません:
  • チェックボックスの全選択と逆選択の例を実現する js
  • jsはチェックボックスをすべて選択、選択解除、反転するメソッドを実装します
  • AngularJSは、すべて選択したり選択解除したりする機能を実装しています
  • javascript チェックボックスですべて選択/選択解除して一括削除する
  • Vue.js を使用してチェックボックスの全選択と反転選択の効果を実現する
  • すべてのチェックボックスの選択を反転する js の IE および Firefox バージョンと互換性があります
  • JavaScriptはシンプルな全選択と逆選択機能を実装します
  • チェックボックスの全選択と逆選択を実現する js html css
  • チェックボックスの全選択と逆選択イベントを実装する JavaScript の詳細な説明
  • js は CheckBoxList を操作して全選択/全選択解除します (クライアント側で完了)

<<:  MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

>>:  VSCode と SSH を使用したリモート開発

推薦する

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

コンポーネントベースのフロントエンド開発プロセスの詳細な説明

背景<br />フロントエンドを担当する学生は、ページが多すぎると煩雑になるため、開発プ...

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

HTMLの基本構造を包括的に理解する

HTML入門ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語ハイパーテキスト...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

JavaScript の document.activeELement フォーカス要素の紹介

目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法

マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...

CSS のインライン スタイルに変換するソリューション (css-inline)

シーンについて話すメールを送信サードパーティのウェブサイトにHTMLを埋め込む他の編集者の記事をコピ...

Linux システムで Tomcat のポート 80 を使用する方法

アプリケーションシナリオ多くの場合、Linux サーバーに tomcat や nginx などのソフ...

HTML doctype の役割の紹介

ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...