Javascript 使用复选框向占位符添加值

基本上，我的表单中有4个复选框元素，顶部有一个文本字段。

文本字段

有一个带有

产品名称

-

产品价格

格式的

占位符

。每个复选框都有产品名称和产品价格，我想在选中复选框后使用javascript更改占位符值。问题是产品价格应该是默认占位符基价和选中复选框的产品价格之和。占位符的第一部分应从产品名称更改为产品名称+产品名称

到目前为止，我只能够使用javascript完全更改占位符的值，如果我只有一个复选框，这将起作用，但我有4个复选框，所以它不起作用

在完美世界中，选中所有复选框时，

占位符

应显示

基本套餐+视频+图片+巡演+紧急情况-€30

，仅选中

选项2

和

选项3

时，

基本套餐+图片+巡演-€20

。等等，等等

以下是我试图实现的简化代码（注意：我的代码中只有视频有效）：

$（'.Option1'）。关于（'change'，函数（e）{
如果（$（this）.is（':checked'）==true）{
$（'.PriceInput'）.attr（'占位符'，'基本包+视频-€15'）；
}else$（'.PriceInput'）.attr（'placeholder'，'Basic Package-€10'）；
});

视频-5欧元
图片-5欧元
旅游-5欧元
紧急情况-5欧元
我已从每个
class=“Option”

然后你可以这样做：

$('.Option').on('change', function(e) {
  var s = "";
  var p = 10;
  $('.Option').each(function() {
    if ($(this).is(':checked') === true) {
      s += " + " + $(this).val();
      var tempP = +$(this).next().text().split('€')[1];
      p = p + tempP;
    }
  }); 
  $('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});

演示


$（'.Option'）。关于（'change'，函数（e）{
var s=“”；
var p=10；
$（'.Option'）。每个（函数（）{
如果（$（this）.is（':checked'）==true）{
s++=“+”++$（this.val（）；
var tempP=+$（this.next（）.text（）.split（'€'）[1]；
p=p+tempP；
}
}); 
$（'.PriceInput'）.attr（'placeholder'，'Basic Package'+s+'-€'+p）；
});

视频-5欧元
图片-5欧元
旅游-5欧元
紧急情况-5欧元
您需要多重插入吗？@s.kuznetsov我不完全确定您的意思，您能详细说明一下吗？当我在谷歌上搜索时，我偶然发现了SQL查询，但我不使用数据库。此表单中的数据是使用PHP邮件发送的。@s.kuznetsov我想这也确实有效。然而，有人已经评论了一个解决方案，它可以更顺利地处理我目前的情况。谢谢你的关注！好吧，如果你不需要更多的帮助，那么祝你有一个愉快的一天。这正是我想要实现的，谢谢！一个问题：在哪里更改复选框的价格值？5是这个snipper简化它的一个例子。而且，由于某种原因，它在我的代码中不起作用，而在您提供的代码片段中它完全可以正常工作。当涉及到复杂化上面的简化版本时，有什么我需要警惕的吗？实际上我已经弄明白了！非常感谢，标记为解决方案！