suchen

Heim >Web-Frontend >js-Tutorial >So wählen Sie alles in Javascript aus

So wählen Sie alles in Javascript aus

藏色散人
藏色散人Original
2022-01-18 11:26:176565Durchsuche

So implementieren Sie All-Select in JavaScript: 1. Erstellen Sie ein Formular über HTML und CSS. 2. Verwenden Sie DOM-Methoden, um die „Eingabe“-Elemente für All-Select bzw. Single-Select zu erhalten. 4. Ändern Sie den Wert von isAllChecked Assigned zur Schaltfläche „Alle auswählen“.

So wählen Sie alles in Javascript aus

Die Betriebsumgebung dieses Artikels: Windows 7-System, Javascript-Version 1.8.5, Dell G3-Computer.

Wie wähle ich alles in Javascript aus?

Verwenden Sie JS, um die vollständige Auswahl und die inverse Auswahl im Formular zu implementieren

Dies ist auch eine Übung, bei der alles im allgemeinen E-Commerce-Warenkorb ausgewählt und eine umgekehrte Auswahl hinzugefügt wird (anscheinend gibt es solche). (nicht viele Einkaufswagen mit umgekehrter Auswahlfunktion, aber es handelt sich um eine Windows-Ressource. Der Manager verfügt über eine umgekehrte Auswahlfunktion.) „Alle auswählen“ wird automatisch aktiviert; wenn es Produkte gibt, die nicht aktiviert sind, wird „Alle auswählen“ automatisch abgebrochen.

So wählen Sie alles in Javascript aus

Wenn nicht alle 4 Produktreihen aktiviert sind, aktivieren Sie „Alle auswählen“, um alle 4 Produktreihen zu aktivieren.

    Wenn „Alle auswählen“ aktiviert ist, deaktivieren Sie „Alle auswählen“ und alle Produkte werden aktiviert deaktiviert sein.

  • Nachdem wir die Anforderungen geklärt haben, verwenden wir zunächst HTML und CSS, um dieses Formular zu zeichnen. Der Code lautet wie folgt: 

    <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>

    Hier habe ich die Funktion „Alle auswählen“ und „funcAll“ genannt ()“. Die ausgewählte heißt „funcOne()“, die umgekehrte heißt „funcBackward()“. Der CSS-Teil fügt dem Formular hauptsächlich Rahmen hinzu und verschmelzt gleichzeitig die Ränder an der Kreuzung, was im Grunde das einfachste Aussehen darstellt.
  • Lassen Sie uns zunächst über die Anforderungen 2 und 3 sprechen. Die Logik ist relativ einfach:

    Verwenden Sie die DOM-Methode, um die „Eingabe“-Elemente für die vollständige Auswahl bzw. Einzelauswahl zu erhalten, verwenden Sie einfach getElementById () (Legen Sie die ID bereits im Voraus fest) und es gibt vier Optionsfelder. Verwenden Sie getElementByClassName(), um sie abzurufen (die Klasse wurde im Voraus festgelegt).
Weisen Sie die erhaltenen Elemente Variablen zu, verwenden Sie dann eine for-Schleife, um das Array zu durchlaufen, und weisen Sie das geprüfte Attribut der Variablen, die alle auswählt, dem geprüften Attribut jeder einzelnen ausgewählten Variablen zu.

Zu diesem Zeitpunkt wurden 2 und 3 gleichzeitig gelöst. Der Code lautet wie folgt: 

function funcAll(){
            var selectAll = document.getElementById('selectAll');
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i <p> Als nächstes sprechen wir über Punkt 1: „Wenn alle 4 Produktreihen aktiviert sind, wird automatisch „Alle auswählen“ angezeigt aktiviert; wenn Produkte vorhanden sind, wird „Alle auswählen“ automatisch abgebrochen . Daher muss diese Logik in das Mausklickereignis des Optionsfelds jeder Produktreihe geschrieben werden. </p><p>Ich habe eine Variable „isAllChecked“ als Brücke eingerichtet. Der Anfangszustand definiert „isAllChecked“ als „true“ und durchläuft jedes Optionsfeld. Sobald festgestellt wird, dass ein Optionsfeld nicht aktiviert ist, wird „isAllChecked“ auf „false“ gesetzt und die Schleife verlassen. und Weisen Sie der Schaltfläche „Alle auswählen“ den Wert „isAllChecked“ zu. </p><p>Solange ein Optionsfeld nicht ausgewählt ist, werden auch alle ausgewählten Optionsfelder deaktiviert. , der Code lautet wie folgt: </p><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 <p>Sprechen wir über die inverse Auswahl</p><p></p><p>Klicken Sie auf die Schaltfläche „Inverse Auswahl“, und der Status aller Optionsfelder wird umgekehrt: Die ausgewählten werden nicht ausgewählt und die nicht ausgewählten werden ausgewählt</p><p>Klicken die umgekehrte Auswahl, und das Ergebnis ist: Es ist immer noch möglich, die Auswahl mit der vorherigen Logik in Einklang zu bringen. </p><p></p><p>Element 1 ist tatsächlich einfach zu implementieren. Wenn Sie auf die Schaltfläche „Invertieren“ klicken, blättern Sie durch die 4 Optionsfelder und invertieren Sie das aktivierte Attribut, das jedem Element entspricht. </p><h3>Die zuvor implementierte Select-All-Überwachung aller einzelnen Elemente wird jedoch tatsächlich im Klickereignis jedes Optionsfelds implementiert. Das heißt, wenn wir den Status des Optionsfelds nicht durch Klicken auf das Optionsfeld ändern, Wenn Sie alles auswählen, können Sie die Gesamtsituation tatsächlich nicht überwachen. </h3><blockquote>Also können wir den Überwachungscode in die Mausklickfunktion für die umgekehrte Auswahl schreiben. Der endgültige Code lautet wie folgt: <ol>
<pre class="brush:php;toolbar:false">            var selectAll = document.getElementById('selectAll');            //函数作用域，所以得再定义一遍
            var selectOnes = document.getElementsByClassName('selectOne');
            for (var i = 0; i 
  • Der endgültige Effekt ist wie folgt:
  • Empfohlenes Lernen: „

    js grundlegendes Tutorial

    》

    Das obige ist der detaillierte Inhalt vonSo wählen Sie alles in Javascript aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    • JavaScript css html for 循环 class JS 事件 dom input windows
    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：Wie implementiert man die HTTP-Übertragung großer Dateien basierend auf NodeJS? (Austausch praktischer Methoden)Nächster Artikel：Wie implementiert man die HTTP-Übertragung großer Dateien basierend auf NodeJS? (Austausch praktischer Methoden)

    In Verbindung stehende Artikel

    Mehr sehen