Javascript 同时显示和汇总div中不同的选定复选框中的值

我是新来的，所以这个问题对你来说可能很愚蠢

我有一个网站，我在其中显示一些复选框。这些复选框中有一些值需要与价格相加，还有一个文本需要在div中显示

，如您所见，复选框需要将自己的价格与橙色图片相加（它们有两个不同的

div

），然后在

div

中插入值，并显示

id=plus

现在我猜到了这个解决方案，但它根本不起作用

var basicPrice=784；//这就是我们的开始
函数getCheck（）{
var currentPrice=basicPrice；//每次
当前价格=基本价格，
正=[]，
总数=0；
console.log（当前价格）
$（“输入[id^=plus]”）。每个（函数（）{
如果（选中此项）{
总计+=+此值；
plus.push（$（“[for=“+this.id+”]）.html（）；//获取标签文本
}
});
$（“#plus display”）.html（plus.join（“，”）；
}

784 €




加：显示复选框名称的位置




784 €




内饰套装
+25欧元
Sicurezza Domotica
‍+7欧元的al-mese
安全增强版
‍+9欧元al-mese
情感
‍‍+15欧元al-mese
框自动
‍‍+123欧元al-mese
ASCICURAZIONE
‍+4欧元的al-mese
健康
‍‍+45欧元al-mese
户外包装
‍+36欧元

您的输入没有以

plus

开头的ID，因此您的选择器出现故障。 您可以使用

form#plus div[class^=plus-]input

作为选择器。这将限制选择器的范围并避免碰撞

在javascript的第一行中，似乎也发生了一些事情：

var currentPrice = basicPrice; // every time
 CurrentPrice = basicPrice,
   plus = [],
   total = 0;

您可能不需要在声明前设置

currentPrice

和

currentPrice

（两个不同的变量）以及缺少的

var

关键字

希望这对您有所帮助，而不会让您失去编写代码的乐趣！：）

纯JS解决方案：

const form = document.getElementsByTagName("form")[0]

form.addEventListener("click", (e) => { // taking advantage of eventBubbling here
  const target = e.target

  if(String(target).toLowerCase().includes("input")) { // naive check if clicked element is input - you should implement better check most probably
    const clickedCheckboxValue = parseFloat(target.value)
    const currentSumElement = document.querySelector("#sum") 
    const currentSum = parseFloat(currentSumElement.innerText)    

    currentSumElement.innerText = target.checked
      ? currentSum + clickedCheckboxValue 
      : currentSum - clickedCheckboxValue 
  }
})

这个代码什么时候被解雇？这里没有任何类型的

eventListener

，您的代码中有它吗

很高兴知道这个方法是如何被激发的

一般来说，我会建议不同的方法：

• 将事件侦听器添加到每个复选框（或它们的公共父项，以便您可以利用eventBubbling—这是常见的场景）
• 单击时，检查单击的复选框是否为：
  • 选中-您应该将其添加到您的总和中
  • 未选中-您应该从总和中减去
• 获取复选框旁边的值
• 加法/减法求和

另外，请更详细地描述应该发生的事情。 前任。 在

#someID

上，单击获取

中的值。someClassName

并将其添加/减去到

#someOtherID

中的值

代码笔中的草图：

---

我将在复选框上添加事件侦听器。因此，每次更改时，您都可以重新计算所需的内容。此外，我已经更改了foreach的选择器，因为您没有以plus开头的id。。。希望能有帮助

var basicPrice=784；//这就是我们的开始
$（文档）.on（'change'，'input[type=checkbox]'，getCheck）；
函数getCheck（）{
var currentPrice=basicPrice；//每次
当前价格=基本价格，
正=[]，
总数=0；
console.log（当前价格）
$（“输入[type=checkbox]”）。每个（函数（i，el）{
如果（$（el）.is（“：选中”））{
total+=parseInt（$（el）.val（））；
控制台日志（总计）；
//更新：
plus.push（$（el.data（'name'））；//获取标签文本
}
});
$（“#plus display”）.html（plus.join（“，”）；
$（'#rata-display-2'）.html（总计）；
}

784 €




加：显示复选框名称的位置




784 €




内饰套装
+25欧元
Sicurezza Domotica
‍+7欧元的al-mese
安全增强版
‍+9欧元al-mese
情感
‍‍+15欧元al-mese
框自动
‍‍+123欧元al-mese
ASCICURAZIONE
‍+4欧元的al-mese
健康
‍‍+45欧元al-mese
户外包装
‍+36欧元

使用JQuery可以实现这一点，但我实际上修改了您的

span

标记，使其与货币分开，以便该值是动态的（但是我仅使用一个签出值对其进行了测试）
确保使用

parseInt（）

检索

span

标记中的文本，使其成为数字
建议您参考以更好地理解此想法

$（.check plus”）.on（“更改”，函数（）{
var basic=784；
$（“.check plus”）。每个（函数（）{
如果（选中此项）{
basic+=parseInt（this.getAttribute（“值”））
name+=this.getAttribute（“name”）+“
”
}
})
$（“.checkout.rata”）.text（基本）；
$（“#加显示”）.html（名称）
})

784 €




加：显示复选框名称的位置




784 €




内饰套装
+25欧元
Sicurezza Domotica
‍+7欧元的al-mese
安全增强版
‍+9欧元al-mese
情感
‍‍+15欧元al-mese
框自动
‍‍+123欧元al-mese
ASCICURAZIONE
‍+4欧元的al-mese
健康
‍‍+45欧元al-mese