jquery全选和单选求总价

在互联网的世界里，购物车功能几乎是每个电商平台的标配，而如何让用户在选购商品时能够方便快捷地计算总价，就成了提升用户体验的关键，就让我们来聊聊如何利用jQuery实现全选和单选求总价的功能，让你的网站购物体验更上一层楼。

我们需要了解的是，jQuery是一个快速、小巧且功能丰富的JavaScript库，它使得HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，在实现全选和单选求总价的功能时，我们可以利用jQuery的事件绑定和DOM操作能力。

准备HTML结构

在开始编写代码之前，我们需要有一个基本的HTML结构，包括商品列表、选择框、总价显示区域等，这里是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车总价计算</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h2>商品列表</h2>
    <ul id="product-list">
        <li>
            <input type="checkbox" class="product-checkbox" value="100"> 商品A - 100元
        </li>
        <li>
            <input type="checkbox" class="product-checkbox" value="200"> 商品B - 200元
        </li>
        <li>
            <input type="checkbox" class="product-checkbox" value="150"> 商品C - 150元
        </li>
        <!-- 更多商品 -->
    </ul>
    <button id="selectAll">全选</button>
    <button id="deselectAll">全不选</button>
    <p>总价: <span id="total-price">0</span>元</p>
    <script>
        // 这里是我们的jQuery代码
    </script>
</body>
</html>

编写jQuery代码

我们将编写jQuery代码来处理全选、单选和计算总价的逻辑。

$(document).ready(function() {
    var totalPrice = 0;
    // 单选商品时更新总价
    $('.product-checkbox').change(function() {
        var price = parseInt($(this).val(), 10);
        if ($(this).is(':checked')) {
            totalPrice += price;
        } else {
            totalPrice -= price;
        }
        $('#total-price').text(totalPrice);
    });
    // 全选按钮
    $('#selectAll').click(function() {
        $('.product-checkbox').prop('checked', true);
        updateTotalPrice();
    });
    // 全不选按钮
    $('#deselectAll').click(function() {
        $('.product-checkbox').prop('checked', false);
        updateTotalPrice();
    });
    // 更新总价的函数
    function updateTotalPrice() {
        totalPrice = 0;
        $('.product-checkbox:checked').each(function() {
            totalPrice += parseInt($(this).val(), 10);
        });
        $('#total-price').text(totalPrice);
    }
});