JS ใช้ตะกร้าสินค้าง่าย ๆ พร้อมรูปภาพและรหัส

ดังที่แสดงในภาพ:

การใช้ปุ่มเลือกทั้งหมดคือ:

การคัดลอกรหัสมีดังนี้:

<อินพุต type = "ช่องทำเครื่องหมาย" name = "all" onclick = "checkall ()" /> เลือกทั้งหมด <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "item" value = "3000" /> แล็ปท็อป: 3000 yuan <br />

<อินพุต type = "ช่องทำเครื่องหมาย" name = "all" onclick = "checkall ()" /> เลือกทั้งหมด <br />

<อินพุต type = "button" value = "รับจำนวนเงินทั้งหมด" onclick = "getSum ()" />>>>

<span id = "sum"> </span>

แท็กช่วงสุดท้ายใช้เพื่อจัดเก็บพื้นที่ที่แสดงจำนวนเงินทั้งหมด

รหัสที่ใช้ฟังก์ชั่น "เลือกทั้งหมด" สองรายการคือ:

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น checkall ()

-

// var allnode = document.getElementsByName ("ทั้งหมด") [0];

// รับองค์ประกอบที่คลิก

var allnode = event.srecelement;

var item = document.getElementsByName ("item");

สำหรับ (var x = 0; x <item.length; x ++)

-

รายการ [x] .Checked = AllNode.Checked;

-

-

Event.srcelement ใช้การได้มาของปุ่มตอบสนองการตอบสนอง

สำหรับลูปแก้ไขคุณสมบัติที่ตรวจสอบสำหรับแต่ละกล่องตรวจสอบหลายกล่อง

วิธีการคำนวณจำนวนเงินทั้งหมดคือ:

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น getsum ()

-

var item = document.getElementsByName ("item");

var sum = 0;

สำหรับ (var x = 0; x <item.length; x ++)

-

ถ้า (รายการ [x]. ตรวจสอบ)

-

sum+= parseInt (รายการ [x] .value);

-

-

var spannode = document.getElementById ("sum");

spannode.innerhtml = (sum+"meta"). fontsize (7);

-

เพิ่มค่าค่าของกล่องกาเครื่องหมายที่เลือกทั้งหมด