在電商平臺(tái)的開(kāi)發(fā)中，購(gòu)物車功能是一個(gè)核心模塊，而其中復(fù)選框的聯(lián)動(dòng)操作（如選中父級(jí)分類時(shí)，其下的所有子級(jí)商品也被選中）則是提升用戶體驗(yàn)的關(guān)鍵。本文將詳細(xì)解析如何使用原生JavaScript實(shí)現(xiàn)復(fù)選框的父子級(jí)聯(lián)動(dòng)，并逐步構(gòu)建一個(gè)簡(jiǎn)易的購(gòu)物車數(shù)據(jù)處理服務(wù)。

一、理解復(fù)選框聯(lián)動(dòng)邏輯

復(fù)選框聯(lián)動(dòng)的核心邏輯在于事件監(jiān)聽(tīng)與DOM操作。當(dāng)用戶點(diǎn)擊父級(jí)復(fù)選框時(shí)，我們需要找到其對(duì)應(yīng)的所有子級(jí)復(fù)選框，并將它們的選中狀態(tài)與父級(jí)同步。反之，當(dāng)所有子級(jí)復(fù)選框都被選中時(shí)，父級(jí)復(fù)選框也應(yīng)自動(dòng)變?yōu)檫x中狀態(tài)；若部分子級(jí)被選中，則父級(jí)應(yīng)顯示為不確定狀態(tài)。

二、HTML結(jié)構(gòu)設(shè)計(jì)

構(gòu)建一個(gè)清晰的HTML結(jié)構(gòu)，模擬購(gòu)物車中的商品分類與商品項(xiàng)：
`html

`

三、JavaScript實(shí)現(xiàn)聯(lián)動(dòng)功能

1. 父級(jí)控制子級(jí)

為父級(jí)復(fù)選框添加點(diǎn)擊事件，當(dāng)選中時(shí)，將其所有子級(jí)復(fù)選框設(shè)為選中；取消選中時(shí)，則將子級(jí)全部取消。
`javascript
const parentCheckboxes = document.querySelectorAll('.parent-checkbox');
parentCheckboxes.forEach(parent => {
parent.addEventListener('change', function() {
const category = this.getAttribute('data-category');
const childCheckboxes = document.querySelectorAll(.child-checkbox[data-category="${category}"]);
childCheckboxes.forEach(child => {
child.checked = this.checked;
});
});
});
`

2. 子級(jí)影響父級(jí)狀態(tài)

為每個(gè)子級(jí)復(fù)選框添加事件監(jiān)聽(tīng)，當(dāng)子級(jí)狀態(tài)變化時(shí)，檢查其所屬父級(jí)下的所有子級(jí)選中情況，更新父級(jí)狀態(tài)。
`javascript
const childCheckboxes = document.querySelectorAll('.child-checkbox');
childCheckboxes.forEach(child => {
child.addEventListener('change', function() {
const category = this.getAttribute('data-category');
const parentCheckbox = document.querySelector(.parent-checkbox[data-category="${category}"]);
const siblings = document.querySelectorAll(.child-checkbox[data-category="${category}"]);
const checkedCount = Array.from(siblings).filter(cb => cb.checked).length;

if (checkedCount === 0) {
parentCheckbox.checked = false;
parentCheckbox.indeterminate = false;
} else if (checkedCount === siblings.length) {
parentCheckbox.checked = true;
parentCheckbox.indeterminate = false;
} else {
parentCheckbox.checked = false;
parentCheckbox.indeterminate = true;
}
});
});
`

四、構(gòu)建購(gòu)物車數(shù)據(jù)處理服務(wù)

聯(lián)動(dòng)功能完成后，我們需要一個(gè)服務(wù)來(lái)處理選中的商品數(shù)據(jù)，例如計(jì)算總價(jià)、生成訂單列表等。
#### 1. 數(shù)據(jù)收集函數(shù)

創(chuàng)建一個(gè)函數(shù)，遍歷所有被選中的子級(jí)復(fù)選框，提取商品信息（如名稱、價(jià)格等）。
`javascript
function getSelectedItems() {
const selectedItems = [];
document.querySelectorAll('.child-checkbox:checked').forEach(checkbox => {
selectedItems.push({
name: checkbox.value,
category: checkbox.getAttribute('data-category'),
// 可從其他屬性或數(shù)據(jù)集中獲取價(jià)格等
});
});
return selectedItems;
}
`

2. 計(jì)算總價(jià)

假設(shè)每個(gè)商品項(xiàng)都有一個(gè)關(guān)聯(lián)的價(jià)格數(shù)據(jù)（可通過(guò)data-price屬性存儲(chǔ)），我們可以計(jì)算選中商品的總價(jià)。
`javascript
function calculateTotalPrice() {
let total = 0;
document.querySelectorAll('.child-checkbox:checked').forEach(checkbox => {
const price = parseFloat(checkbox.getAttribute('data-price')) || 0;
total += price;
});
return total;
}
`

3. 更新購(gòu)物車顯示

將數(shù)據(jù)服務(wù)與UI結(jié)合，實(shí)時(shí)顯示選中商品列表和總價(jià)。
`javascript
function updateCartDisplay() {
const items = getSelectedItems();
const total = calculateTotalPrice();
// 更新DOM元素，例如顯示總價(jià)的span
document.getElementById('total-price').textContent = 總價(jià): ￥${total.toFixed(2)};
// 可選：更新商品列表
console.log('已選商品:', items);
}

// 在每次復(fù)選框狀態(tài)變化后調(diào)用更新
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
allCheckboxes.forEach(cb => {
cb.addEventListener('change', updateCartDisplay);
});
`

五、優(yōu)化與擴(kuò)展

• 性能優(yōu)化：對(duì)于大量商品，可使用事件委托減少事件監(jiān)聽(tīng)器數(shù)量。
• 狀態(tài)持久化：結(jié)合localStorage保存選中狀態(tài)，避免頁(yè)面刷新后數(shù)據(jù)丟失。
• 與后端交互：將選中的商品數(shù)據(jù)通過(guò)AJAX發(fā)送到服務(wù)器，實(shí)現(xiàn)完整的購(gòu)物車業(yè)務(wù)流程。

###

通過(guò)上述步驟，我們實(shí)現(xiàn)了一個(gè)具備復(fù)選框聯(lián)動(dòng)功能的購(gòu)物車前端模塊，并構(gòu)建了簡(jiǎn)單的數(shù)據(jù)處理服務(wù)。這不僅是前端交互的基礎(chǔ)，也是理解數(shù)據(jù)驅(qū)動(dòng)視圖的實(shí)踐案例。你可以在此基礎(chǔ)上，根據(jù)實(shí)際需求擴(kuò)展更多功能，如商品數(shù)量增減、優(yōu)惠券計(jì)算等，打造更完善的購(gòu)物體驗(yàn)。