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

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

Heute verwenden wir Uniapp, um Echarts zur Anzeig...

Beispiel für die Anpassung von rem an mobile Geräte

Vorwort Überprüfung und Zusammenfassung von REM-A...

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung vue-router4 behält den Großteil der...

Analyse der Schwierigkeiten im Hot-Standby der MySQL-Datenbank

Ich habe Ihnen zuvor die Konfigurationsmethode fü...

Vue-Komponente zur Realisierung einer Karussell-Animation

In diesem Artikelbeispiel wird der spezifische Co...

Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten

Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...

Erfahrungsaustausch zur MySQL-Slave-Wartung

Vorwort: Die MySQL-Master-Slave-Architektur dürft...

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...

Navicat importiert CSV-Daten in MySQL

In diesem Artikel erfahren Sie, wie Sie mit Navic...

Detaillierte Erläuterung des MySQL 5.7.9-Shutdown-Syntaxbeispiels

mysql-5.7.9 bietet endlich eine Shutdown-Syntax: ...

So wenden Sie TypeScript-Klassen in Vue-Projekten an

Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....

Flex-Layout realisiert linken Textüberlauf und lässt rechte Textanpassung aus

Ich möchte eine Situation erreichen, in der die B...

Beispielcode zum Implementieren schöner Uhranimationseffekte mit CSS

Ich suche einen Job!!! Vorbereitung: Zunächst ein...