すべてまたは逆の選択機能を実現する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 を使用したリモート開発

推薦する

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

入力のid属性とname属性の違いの例

長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...

MySQL GTID マスターとスレーブの不一致を修復するソリューション

目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...

Vueはビデオ再生を実装するためにビデオタグを使用します

この記事では、ビデオタグを使用してビデオ再生を実装するVueの具体的なコードを参考までに共有します。...

MySQL ストアド プロシージャで case ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

MySQLデータベース入門:マルチインスタンス構成方法の詳しい説明

目次1. マルチインスタンスとは2. 複数インスタンスのインストールの準備3. MYSQLの複数イン...

アニメーション効果のようなVueトランジションの例

目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...

Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

目次質問:プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トーク...

テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...

mysql5.6.zip形式の圧縮版インストールグラフィックチュートリアル

はじめに: MySQL は、スウェーデンの MySQL AB によって開発されたリレーショナル デー...

ブラウザの自動更新を実装するReactサンプルコード

目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...