JavaScript zur Implementierung eines einfachen Einkaufsformulars

JavaScript zur Implementierung eines einfachen Einkaufsformulars

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Einkaufsformulars zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

HTML Quelltext:

<table border="" cellspacing="0" cellpadding="1">
   <tr style="Hintergrundfarbe: #0099cc;">
    <td><input Typ="Kontrollkästchen" Klasse="alle"/></td>
    <td style="text-align: center; width: 200px;">Produkte</td>
    <td style="Farbe: weiß; Breite: 70px; Höhe: 30px; Textausrichtung: Mitte;">Preis</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Apfel</td>
    <td style="text-align: center;" Klasse="zongji">8000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Banane</td>
    <td style="text-align: center;" Klasse="zongji">5000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Birne</td>
    <td style="text-align: center;" Klasse="zongji">2000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Gemüse</td>
    <td style="text-align: center;" Klasse="zongji">2000</td>
   </tr>
   <tr>
    <td colspan="3">Der Gesamtpreis beträgt: <span class="zongjia">0</span> Yuan</td>
   </tr>
</Tabelle>

JQ-Code:

<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <Skripttyp="text/javascript">
   $(Funktion(){
     $(".alle").ändern(Funktion(){
      var-Wert = $(this).prop("geprüft")
      $(".lla").prop("überprüft",Wert)
      zongjia ()
     })
     $(".lla").klick(function(){
      var chang1=$(".lla").Länge;
      var chang2=$(".lla:checked").Länge;
      wenn(ändern1===ändern2){
       $(".all").prop("aktiviert",true)
      }anders{
       $(".all").prop("aktiviert",falsch)
      }
      zongjia ()
     })
     $(".lla").ändern(Funktion(){
      zongjia ()
     })
     Funktion zongjia(){
      var xuan=$(".lla:checked").parents(".zuida");
      Variable Nummer = 0;
      xuan.each(Funktion(Index,ROM){
       var xuanzhi=$(rom).find(".zongji").text()*1;
       Zahl+=xuanzhi;
      })
      $(".zongjia").text(num);
     }
    })
</Skript>

Bild des fertigen Produkts:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vuejs bringt Ihnen Schritt für Schritt bei, einen vollständigen Beispielcode für einen Einkaufswagen zu schreiben
  • Ideen und Code zur Implementierung von js-Einkaufswagen (finde ich persönlich gut)
  • Schreiben einer einfachen Warenkorbfunktion in JavaScript
  • Detaillierter Javascript-Code zur Implementierung der Warenkorbfunktion
  • js implementiert einen einfachen Einkaufswagen mit Bildern und Codes
  • Jsp+Servlet zur Realisierung der Warenkorbfunktion
  • Javascript manipuliert Cookies, um Warenkorbprogramm zu implementieren
  • Einfaches Front-End-JS+Ajax-Einkaufswagen-Framework (Anleitung für Anfänger)
  • Native JS-Simulation Taobao Einkaufswagen-Projektpraxis
  • js, um Einkaufswagen-Additions- und Subtraktionseffekte zu erzielen

<<:  Zusammenfassung gängiger Docker-Befehle (empfohlen)

>>:  MySQL-Export ganzer oder einzelner Tabellendaten

Artikel empfehlen

Standard-CSS-Stil der XHTML-Sprache

html,Adresse, Blockzitat, Körper, dd, div, dl,dt,...

Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

Inhaltsverzeichnis 1. Was ist eine Komponente? 2....

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren

Vorwort Bei der tatsächlichen Entwicklung werden ...

Zeichnen Sie ein Herz mit CSS3

Ergebnisse erzielenAnforderungen/Funktionalität: ...

4 Möglichkeiten zur Implementierung von Routing-Übergangseffekten in Vue

Vue-Router-Übergänge sind eine schnelle und einfa...

WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

Suchseite: search.wxml-Seite: <view class=&quo...

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

Lassen Sie mich kurz das Funktionsszenario erklär...

So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox

Ich bin heute auf mehrere Browserkompatibilitätsp...

Lösung für den Fehler „Mehrere Primärschlüssel definiert“ in MySQL

Es gibt zwei Möglichkeiten, einen Primärschlüssel...

Detaillierte Erklärung der Docker-Maschinennutzung

Docker-Machine ist ein offiziell von Docker berei...

Detaillierte Erläuterung der MySQL Master-Slave-Datenbankkonstruktionsmethode

Dieser Artikel beschreibt, wie man eine MySQL Mas...