ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptですべてを選択する方法

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

藏色散人
藏色散人オリジナル
2022-01-18 11:26:176541ブラウズ

全選択を実装する 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('selectAll');
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i 反転選択について話しましょう<p></p><p></p>反転選択ボタンをクリックすると、すべてのラジオ ボタンのステータスが反転します。選択したものは選択解除され、選択されていないものは選択を <p></p> に変更し、[選択を反転] をクリックします。結果として、選択は以前のロジックと一致します。 <h3></h3><blockquote>
<ol>項目 1 は、実際には非常に簡単に実装できます。反転ボタンをクリックして、4 つのラジオ ボタンを順番に切り替えて、各要素に対応するチェックされた属性を反転します。 <li>ただし、以前に実装したすべての単一項目の全選択リスナーは、実際には各ラジオ ボタンのクリック イベントに実装されます。つまり、ラジオ ボタンをクリックして単一項目を変更しない場合、 , 選択ボタン「すべて選択」の状態は、実際にはグローバルには監視されません。 <li>したがって、反転選択マウス クリック関数に監視コードを書き込むことができます。最終的なコードは次のとおりです: </ol>
<pre class="brush:php;toolbar:false">function funcOne(){                                                  
            var selectAll = document.getElementById('selectAll');            //函数作用域,所以得再定义一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            var isAllChecked = true;                                        //定义一个变量作为桥梁来控制全选按钮
            for (var i = 0; i 
最終的な効果は次のとおりです:

推奨学習: 「

js 基礎チュートリアル

以上がJavaScriptですべてを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。