如何在jQuery中获取变量存储的变量值及计算选中复选框对应金额总和

我来帮你搞定这两个问题，先从核心的「获取存储在另一变量中的变量值」说起，再结合复选框场景实现金额求和。

一、获取存储在另一变量中的变量值 #

你拿到undefined的核心原因，应该是直接用变量名的字符串去访问变量了——比如你定义了var applePrice = 5;，又把变量名存在var targetVar = 'applePrice';里，直接写targetVar拿到的只是字符串'applePrice'，而非它对应的值5。

解决方法分两种场景：

• 全局变量场景：可以通过window[变量名字符串]来获取值，比如window[targetVar]就能拿到5。
• 局部变量场景：更推荐把变量存到一个对象里，通过对象属性访问来获取，避免全局污染，示例：

  // 把所有金额变量放到统一对象中管理
  const priceMap = {
    apple: 5,
    banana: 3,
    orange: 4
  };
  const targetKey = 'apple';
  console.log(priceMap[targetKey]); // 输出5
  

二、复选框勾选时获取对应值并计算总和 #

结合你的场景，我们可以把复选框和对应金额关联起来，每次勾选状态变化时，遍历所有勾选的复选框累加金额。下面是完整实现代码：

HTML结构（适配你的场景） #

<div>
  <label><input type="checkbox" data-price-key="apple"> 苹果</label>
  <label><input type="checkbox" data-price-key="banana"> 香蕉</label>
  <label><input type="checkbox" data-price-key="orange"> 橙子</label>
</div>
<p>总金额：<span id="totalAmount">0</span></p>

jQuery代码 #

$(document).ready(function() {
  // 存储所有商品金额，用对象管理更清晰可维护
  const priceMap = {
    apple: 5,
    banana: 3,
    orange: 4
  };

  // 给所有复选框绑定状态变化事件
  $('input[type="checkbox"]').on('change', function() {
    let total = 0;
    // 遍历所有被勾选的复选框
    $('input[type="checkbox"]:checked').each(function() {
      // 获取当前复选框对应的金额key
      const priceKey = $(this).data('price-key');
      // 通过key从对象中取对应金额，累加到总和（加||0防止key不存在时出现NaN）
      total += priceMap[priceKey] || 0;
    });
    // 更新页面上的总金额显示
    $('#totalAmount').text(total);
    // 可选：弹出当前操作复选框的对应金额
    if ($(this).is(':checked')) {
      const currentPrice = priceMap[$(this).data('price-key')];
      alert(`当前选中商品金额：${currentPrice}`);
    }
  });
});

关键细节说明 #

• 用data-price-key属性关联复选框和金额对象的key，比直接存变量名更规范灵活。
• 每次触发change事件时重新计算总和，确保勾选/取消操作后结果实时准确。
• 如果你的场景是复选框对应输入框（而非预定义金额），只需调整取值逻辑：

  // 假设复选框和输入框是兄弟节点
  const inputVal = $(this).siblings('input[type="number"]').val();
  total += parseFloat(inputVal) || 0;
  

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