JavaScriptですべてを選択する方法-jsチュートリアル-php.cn

JavaScriptですべてを選択する方法

藏色散人

リリース： 2022-01-18 11:26:17

オリジナル

6430 人が閲覧しました

全選択を実装する Javascript メソッド: 1. HTML と CSS を使用してフォームを作成します; 2. DOM メソッドを使用して、全選択と単一選択の「入力」要素をそれぞれ取得します; 3. variable isAllChecked; 4. isAllChecked の値を「すべて選択」ボタンに割り当てます。

JavaScriptですべてを選択する方法

この記事の動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

javascript すべてを選択するにはどうすればよいですか?

JS を使用して、次の形式で完全選択と逆選択を実装します。

これは、一般的な電子商取引ですべてを選択する演習でもあります。 (逆選択機能を備えたショッピングカートは少ないようですが、Windows エクスプローラーには逆選択機能があります)

JavaScriptですべてを選択する方法

では、逆選択機能を追加してみましょう。すべて選択から開始します:

製品の 4 行すべてがチェックされている場合は、「すべて選択」が自動的にチェックされ、いずれかの製品がチェックされていない場合は、「すべて選択」が自動的にチェックされます。キャンセル。

#商品の 4 行すべてにチェックが入っていない場合は、「すべて選択」にチェックを入れて、商品の 4 行すべてにチェックを入れます。「すべて選択」にチェックを入れ、「すべて選択」のチェックを外すと、すべての商品のチェックが外れます。

要件を整理したら、まず HTML と CSS を使用してこのフォームを描画します。コードは次のとおりです。マウスクリックイベントの関数名前を付けたら、全選択の場合は「funcAll()」、単一選択の場合は「funcOne()」、逆選択の場合は「funcBackward()」とします。 CSS 部分は主にフォームに境界線を追加し、同時に接合部の境界線をブレンドする、基本的に最も単純な外観です。
最初に要件 2 と 3 について話しましょう。ロジックは比較的単純です:

DOM メソッドを使用して、完全選択と単一選択の「入力」要素をそれぞれ取得します。すべての選択に 1 つを使用します。直接使用します。getElementById() だけで十分です (ID は事前に設定されています)。ラジオの選択は 4 つあります。取得するには getElementByClassName() を使用します (クラスは事前に設定されています)。もちろん、得られるのは配列です。

取得した要素を変数に代入し、for ループを使用して配列を走査し、すべてを選択する変数のchecked属性を、単一選択された各変数のchecked属性に割り当てます。

この時点で、2と3は同時に解決されており、コードは次のとおりです:

<html>
<head>
    <meta charset="utf-8">
    <title>全选2</title>
    <style type="text/css">     
        .wrap{
            margin-left: 500px;
            margin-top: 200px;
        }
        table{
            border-collapse:collapse;
        }

        th{
            border:1px solid black;
            height: 45px;   
        }

        td{
            border:1px solid black;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">  
        <table cellspacing="0" cellpadding="14">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll" onclick="funcAll()">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPhone X</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>iPad air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="selectOne" onclick="funcOne()">
                    </td>
                    <td>Apple watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
        <input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
    </div>
</body>
</html>

ログイン後にコピー

次に、項目1について説明します。チェックが入っている場合は、「すべて選択」が自動的にチェックされ、チェックが入っていない製品がある場合、「すべて選択」は自動的にキャンセルされます。」

ここで、「すべて選択」の状態は、他のすべてのボタンを監視するのと同様です。変更がある場合は自動的に変更されます。したがって、このロジックを製品の各行のラジオボタンのマウスクリックイベントに書き込む必要があります。

変数 isAllChecked をブリッジとして設定しました。初期状態では isAllChecked が true として定義されており、各ラジオボタンをループします。ラジオボタンがチェックされていないことが検出されたら、isAllChecked を false に設定します。ループの値を選択し、isAllChecked の値を [すべて選択] ボタンに割り当てます。

このように、ラジオボタンが一つも選択されていない限り、全ての選択が非選択状態となります。、コードは次のとおりです。

function funcAll(){
            var selectAll = document.getElementById(&#39;selectAll&#39;);
            var selectOnes = document.getElementsByClassName(&#39;selectOne&#39;);
            for (var i = 0; i < selectOnes.length; i++) {                 //循环遍历，把全选框的值赋给每个单选框
                selectOnes[i].checked = selectAll.checked;             
            }
        }

ログイン後にコピー

反転選択について話しましょう

反転選択ボタンをクリックすると、すべてのラジオボタンのステータスが反転します。選択したものは選択解除され、選択されていないものは選択を

に変更し、[選択を反転] をクリックします。結果として、選択は以前のロジックと一致します。

項目 1 は、実際には非常に簡単に実装できます。反転ボタンをクリックして、4 つのラジオボタンを順番に切り替えて、各要素に対応するチェックされた属性を反転します。
ただし、以前に実装したすべての単一項目の全選択リスナーは、実際には各ラジオボタンのクリックイベントに実装されます。つまり、ラジオボタンをクリックして単一項目を変更しない場合、 , 選択ボタン「すべて選択」の状態は、実際にはグローバルには監視されません。
したがって、反転選択マウスクリック関数に監視コードを書き込むことができます。最終的なコードは次のとおりです:
function funcOne(){                                                  
            var selectAll = document.getElementById(&#39;selectAll&#39;);            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName(&#39;selectOne&#39;);
            var isAllChecked = true;                                        //定义一个变量作为桥梁来控制全选按钮
            for (var i = 0; i < selectOnes.length; i++) {
                if (selectOnes[i].checked === false) {
                    isAllChecked = false;
                    break;
                }
            }
            selectAll.checked = isAllChecked;
        }
ログイン後にコピー
最終的な効果は次のとおりです:

推奨学習: 「
js 基礎チュートリアル
」
以上がJavaScriptですべてを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。