Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js implementiert einen einfachen Warenkorb mit Bildern und Code_Javascript-Kenntnissen

js implementiert einen einfachen Warenkorb mit Bildern und Code_Javascript-Kenntnissen

WBOY
Freigeben： 2016-05-16 16:46:56
Original
1231 Leute haben es durchsucht

Wie im Bild gezeigt:
js implementiert einen einfachen Warenkorb mit Bildern und Code_Javascript-Kenntnissen
Die Implementierung der Schaltfläche „Alles auswählen“ ist:

Kopieren Sie den Code Der Code lautet wie folgt:

Alle auswählen
;input type="checkbox" name="item" value="3000" />Laptop: 3.000 Yuan

Laptop: 3000 Yuan
Laptop: 3000 Yuan
input type="checkbox" name="item" value="3000" />Laptop: 3000 Yuan
Laptop: 3.000 Yuan

Laptop: 3.000 Yuan
type="checkbox" name="item" value="3000" />Laptop: 3000 Yuan
;Laptop: 3000 Yuan

Laptop: 3000 Yuan
="checkbox" name="item" value="3000" />Laptop: 3000 Yuan
Alle auswählen




Das letzte Span-Tag wird verwendet, um den Bereich zu speichern, der den Gesamtbetrag anzeigt.

Der Code zum Implementieren der beiden „Alle auswählen“-Funktionen lautet:




Kopieren Sie den Code


Der Code ist wie folgt folgt:

function checkAll() { //var allNode = document.getElementsByName("all")[0] //Das angeklickte Element abrufenvar allNode = event.srcElement; var item = document.getElementsByName("item"); x].checked = allNode.checked; }
}


event.srcElement implementiert die Erfassung von Antwortereignisschaltflächen.

Die for-Schleife ändert das aktivierte Attribut jedes Mehrfachauswahlfelds.

Die Methode zur Berechnung des Gesamtbetrags ist:




Kopieren Sie den Code

Der Code lautet wie folgt:


function getSum()
{
var item = document.getElementsByName("item");
var sum = 0; item.length;x ) { if(item[x].checked) { sum =parseInt(item[x].value); } var spanNode = document .getElementById("sum");
spanNode.innerHTML = (sum "元").fontsize(7);
}


Konvertieren Sie den Wert von Alle ausgewählten Kontrollkästchen Die Werte addieren sich.
Verwandte Etiketten：
js 购物车
Quelle：php.cn
Vorheriger Artikel：JQuery-Imitationssuche automatische Assoziationsfunktion code_jquery Nächster Artikel：JQuery-Beispielcode für Tabellendaten abrufen_jquery
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...
Aus 2024-04-06 19:54:23
0
1
444
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Sollten wir SSG verwenden, um mit Nuxt.js erstellte Dashboards bereitzustellen? Wir werden mit Nuxt.js ein Dashboard für den internen Gebrauch entwickeln. Da es sich um e...
Aus 2024-04-06 13:17:44
0
1
493
Electron erhält AppData beim Vorladen Wie erhalte ich das vorinstallierte AppData-Verzeichnis? Background.js[...]asyncfunctioncr...
Aus 2024-04-06 11:05:31
0
1
417
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage