すべてまたは逆の選択機能を実現する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>

運用結果