js---全选反选案例+购物车案例

**JS 全选反选案例 + 购物车案例**

### 前言在前端开发中，经常会遇到需要实现全选/反选功能的场景，如购物车、多选题等。在本文中，我们将通过一个实例来演示如何使用 JavaScript 实现全选/反选和购物车案例。

### 全选/反选案例#### HTML 结构

html<!-- checkbox-group.html -->
<div class="checkbox-group">
 <input type="checkbox" id="all-check" />
 <label for="all-check">全选</label>
 <ul>
 <li>
 <input type="checkbox" id="item-1" />
 <label for="item-1">Item1</label>
 </li>
 <li>
 <input type="checkbox" id="item-2" />
 <label for="item-2">Item2</label>
 </li>
 <li>
 <input type="checkbox" id="item-3" />
 <label for="item-3">Item3</label>
 </li>
 </ul>
</div>

javascript// checkbox-group.jsconst allCheck = document.getElementById('all-check');
const items = document.querySelectorAll('.checkbox-group ul li input');

// 监听全选 checkbox 的变化allCheck.addEventListener('change', function() {
 // 如果全选 checkbox 被勾选，所有 item 都应该被勾选 if (this.checked) {
 items.forEach(item => item.checked = true);
 } else {
 // 如果全选 checkbox 没有被勾选，所有 item 都应该被取消勾选 items.forEach(item => item.checked = false);
 }
});

// 监听每个 item 的变化items.forEach(item => {
 item.addEventListener('change', function() {
 // 如果任何一个 item 被勾选，全选 checkbox 应该被勾选 if (this.checked) {
 allCheck.checked = true;
 } else {
 // 如果所有 item 都没有被勾选，全选 checkbox 应该被取消勾选 const uncheckedItems = items.filter(i => !i.checked);
 if (uncheckedItems.length === items.length) {
 allCheck.checked = false;
 }
 }
 });
});

css/* checkbox-group.css */
.checkbox-group ul {
 list-style: none;
 padding:0;
 margin:0;
}

.checkbox-group li {
 margin-bottom:10px;
}

html<!-- shopping-cart.html -->
<div class="shopping-cart">
 <h2>购物车</h2>
 <ul id="cart-items">
 <!-- 购物项将被渲染在此处 -->
 </ul>
 <p>Total: $<span id="total">0.00</span></p>
 <button id="checkout-btn">结算</button>
</div>

javascript// shopping-cart.jsconst cartItems = document.getElementById('cart-items');
const totalSpan = document.getElementById('total');
const checkoutBtn = document.getElementById('checkout-btn');

let cart = [];

// 添加购物项到购物车function addCartItem(item) {
 const li = document.createElement('li');
 li.textContent = item.name + ' x' + item.quantity;
 cartItems.appendChild(li);
 cart.push(item);
}

// 移除购物项从购物车function removeCartItem(item) {
 const li = cartItems.querySelector(`[data-item-id="${item.id}"]`);
 if (li) {
 cartItems.removeChild(li);
 cart = cart.filter(i => i.id !== item.id);
 }
}

// 更新总计function updateTotal() {
 let total =0;
 cart.forEach(item => {
 total += item.price * item.quantity;
 });
 totalSpan.textContent = `$${total.toFixed(2)}`;
}

// 监听结算按钮的点击事件checkoutBtn.addEventListener('click', function() {
 // 将购物车中的项清空 cartItems.innerHTML = '';
 cart = [];
 updateTotal();
});

// 添加示例购物项addCartItem({
 id:1,
 name: '苹果',
 price:5.99,
 quantity:2});
addCartItem({
 id:2,
 name: '橙子',
 price:3.99,
 quantity:1});

// 监听购物项的变化cart.forEach(item => {
 const li = cartItems.querySelector(`[data-item-id="${item.id}"]`);
 if (li) {
 li.addEventListener('change', function() {
 // 如果数量改变，更新总计 updateTotal();
 });
 }
});

css/* shopping-cart.css */
.shopping-cart ul {
 list-style: none;
 padding:0;
 margin:0;
}

.shopping-cart li {
 margin-bottom:10px;
}