Heim > Web-Frontend > js-Tutorial > Hauptteil

JS implementiert einen einfachen Warenkorb mit Bildern und Code

高洛峰
Freigeben: 2017-03-15 16:21:59
Original
1616 Leute haben es durchsucht

Wie in der Abbildung gezeigt:

JS implementiert einen einfachen Warenkorb mit Bildern und Code

Die Implementierung der Schaltfläche „Alles auswählen“ lautet:

<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="button" value="获取总金额" onclick="getSum()" /> 
<span id="sum"></span>
Nach dem Login kopieren

Das letzte Span-Tag wird zum Speichern verwendet der Bereich, in dem der Gesamtbetrag angezeigt wird.

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

function checkAll() 
{ 
//var allNode = document.getElementsByName("all")[0]; 
//获取被点击的元素 
var allNode = event.srcElement; 
var item = document.getElementsByName("item"); 
for(var x=0;x<item.length;x++) 
{ 
item[x].checked = allNode.checked; 
} 
}
Nach dem Login kopieren

event.srcElement implementiert die Erfassung der Antwortereignisschaltfläche.

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

Die Methode zur Berechnung des Gesamtbetrags ist:

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

Addieren Sie die Werte aller ausgewählten Kontrollkästchen.

Weitere verwandte Artikel über die Implementierung eines einfachen Warenkorbs mit Bildern und Codes durch js finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

Grundsätze der Implementierung eines Einkaufswagens für Anfänger in PHP

jQuery-Methode zur Implementierung eines Einkaufswagens basierend auf JSON und Cookie

Native js Simulation Taobao Warenkorb Projekt tatsächlicher Kampf

php zu implementieren einfaches Hinzufügen zum Warenkorb Detaillierte Einführung des Grafikcodes

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage