如何实现复选框与结账按钮联动并计算茶品总价？

需求说明 #

我想要制作一个网站，让用户可以通过下拉菜单选择茶品牌，通过复选框选择对应品牌的茶类型，点击Checkout按钮后，所选茶品的总价显示在下方的“Total”区域中。

各品牌茶品定价 #

• David's Tea（品牌1）：Red Tea $8.99、Grey Tea $7.99、Green Tea $11.99
• Lipton（品牌2）：Red Tea $9.99、Grey Tea $6.99、Green Tea $12.99
• Twining（品牌3）：Red Tea $4.99、Grey Tea $5.99、Green Tea $9.85

修正后的完整代码 #

以下代码实现了品牌选择联动、多选茶品、总价计算的功能：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assignment1.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>茶品商城</title>
</head>
<body>
<?php
// 定义各品牌茶品价格的多维数组
$tea_prices = [
    'davids' => [
        'Red' => 8.99,
        'Grey' => 7.99,
        'Green' => 11.99
    ],
    'lipton' => [
        'Red' => 9.99,
        'Grey' => 6.99,
        'Green' => 12.99
    ],
    'twining' => [
        'Red' => 4.99,
        'Grey' => 5.99,
        'Green' => 9.85
    ]
];

// 初始化总价
$total = 0;

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取选中的品牌和茶类型
    $selected_brand = $_POST['tea'] ?? '';
    $selected_types = $_POST['teatype'] ?? [];
    
    // 计算总价
    if (!empty($selected_brand) && isset($tea_prices[$selected_brand])) {
        foreach ($selected_types as $type) {
            if (isset($tea_prices[$selected_brand][$type])) {
                $total += $tea_prices[$selected_brand][$type];
            }
        }
    }
}
?>

<h1>茶品商城</h1>

<!-- 表单包含品牌选择和茶类型复选框 -->
<form method="post">
    <!-- 品牌下拉菜单 -->
    <label for="tea">选择茶品牌：</label>
    <select name="tea" id="tea" required>
        <option value="" selected>请选择茶品牌</option>
        <option value="davids">David's Tea</option>
        <option value="lipton">Lipton</option>
        <option value="twining">Twining</option>
    </select>

    <!-- 茶类型复选框区域 -->
    <div id="tea-types">
        <!-- 茶类型会根据品牌选择动态显示，这里默认显示提示 -->
        <p>请先选择茶品牌</p>
    </div>

    <input type="submit" value="结算">
</form>

<!-- 总价展示区域 -->
<h2>总价: $<?php echo number_format($total, 2); ?></h2>

<script>
// 实现品牌选择联动，动态显示对应茶类型
const teaSelect = document.getElementById('tea');
const teaTypesDiv = document.getElementById('tea-types');

// 定义各品牌对应的茶类型HTML
const typeTemplates = {
    davids: `
        <p><input type="checkbox" name="teatype[]" value="Red" />红茶 $8.99</p>
        <p><input type="checkbox" name="teatype[]" value="Grey" />格雷茶 $7.99</p>
        <p><input type="checkbox" name="teatype[]" value="Green" />绿茶 $11.99</p>
    `,
    lipton: `
        <p><input type="checkbox" name="teatype[]" value="Red" />红茶 $9.99</p>
        <p><input type="checkbox" name="teatype[]" value="Grey" />格雷茶 $6.99</p>
        <p><input type="checkbox" name="teatype[]" value="Green" />绿茶 $12.99</p>
    `,
    twining: `
        <p><input type="checkbox" name="teatype[]" value="Red" />红茶 $4.99</p>
        <p><input type="checkbox" name="teatype[]" value="Grey" />格雷茶 $5.99</p>
        <p><input type="checkbox" name="teatype[]" value="Green" />绿茶 $9.85</p>
    `
};

// 监听品牌选择变化
teaSelect.addEventListener('change', function() {
    const selectedBrand = this.value;
    if (selectedBrand && typeTemplates[selectedBrand]) {
        teaTypesDiv.innerHTML = typeTemplates[selectedBrand];
    } else {
        teaTypesDiv.innerHTML = '<p>请先选择茶品牌</p>';
    }
});
</script>
</body>
</html>

代码说明 #

1. 用多维数组$tea_prices统一管理各品牌的茶品价格，便于后续维护
2. 表单提交时通过PHP计算选中茶品的总价，并用number_format保留两位小数，保证金额格式规范
3. 加入JavaScript实现品牌选择联动，动态显示对应品牌的茶类型复选框，提升用户体验
4. 修正原代码中复选框无法多选的问题（将name="teatype"改为name="teatype[]"）
5. 移除原代码中多余的show_source(__FILE__)语句，避免页面显示源码

内容的提问来源于stack exchange，提问作者yermteam