如何使用jQuery动态获取复选框选中列值的总和

要使用jQuery动态获取复选框选中列值的总和，首先需要了解以下几个基础概念：

基础概念

jQuery: 是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。
复选框（Checkbox）: HTML中的<input type="checkbox">元素，允许用户选择多个选项。
事件监听: 使用jQuery监听复选框的选中状态变化。
DOM操作: 使用jQuery选择和操作HTML元素。

类型与应用场景

类型: 这种技术常用于表单处理、动态数据展示和交互式用户界面。
应用场景: 在电商网站的购物车结算、权限管理系统、数据分析界面等场景中非常常见。

示例代码

以下是一个完整的示例，展示了如何使用jQuery动态获取复选框选中列值的总和：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Sum Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="checkbox" name="items" value="10"> Item 1 ($10)<br>
        <input type="checkbox" name="items" value="20"> Item 2 ($20)<br>
        <input type="checkbox" name="items" value="30"> Item 3 ($30)<br>
        <input type="checkbox" name="items" value="40"> Item 4 ($40)<br>
    </form>
    <p>Total: $<span id="total">0</span></p>

    <script>
        $(document).ready(function() {
            $('input[name="items"]').change(function() {
                let total = 0;
                $('input[name="items"]:checked').each(function() {
                    total += parseInt($(this).val());
                });
                $('#total').text(total);
            });
        });
    </script>
</body>
</html>

解释

HTML部分:
- 创建了一个包含多个复选框的表单。
- 每个复选框都有一个value属性，表示该项的值。

JavaScript部分:
- 使用$(document).ready()确保DOM完全加载后再执行脚本。
- 使用$('input[name="items"]').change()监听所有复选框的状态变化。
- 在每次状态变化时，遍历所有选中的复选框，累加它们的值，并更新显示的总和。