Javascript 创建计算字段的报价摘要

我有一个表单，允许用户计算服务成本。我可以使用表单通过复选框和输入值*数据价格输出所选服务的总价。但是，我还想创建他们选择的服务的摘要

我想从我提供的小提琴中获得一些结果：

这假设文本1的输入为3，并且前两个复选框已选中

Quote
Text 1        $29.85
Checkbox 1    $19.90
Checkbox 1    $45.95
Total         $95.70

由于输入标签的实际复杂性，我希望在输入和复选框字段中使用数据属性（如如何使用数据价格）

---

您可以这样创建摘要。您必须为表单元素指定适当的名称，以创建适当的摘要

<script >
    $(document).ready(function() {
      $("input.quote-input").each(function() {
        $(this).keyup(function() {
          //alert($(this).attr('data-price')); 

            var price = parseFloat($(this).data('price')) * parseFloat(this.value);
            price = price.toFixed(2);
            var quotename = $(this).attr('name');              
          if(this.value) {

            //$(".quote-sumamry").append(quotename +" $"+ price + " <br/>");
            var summary;

            if($("#" + quotename).length == 0) {
              //it doesn't exist                
              summary = "<div id='"+quotename+"'>"+ quotename +" $" + price + " </div>\n";
              $(".quote-sumamry").append(summary);
            }
            else {
              $("#"+quotename).html(quotename +" $"+ price + " <br/>");
            }  
            $("#"+quotename).show();
          }
          else {
            $("#"+quotename).hide();
          }

          calculateSum();
        });
      });
      $(".special-input").click(function() {
         //alert($(this).is(':checked'));
            var price = $(this).attr('data-price');
            var quotename = $(this).attr('name');
           // $(".quote-sumamry").append(quotename +" $"+ price + " <br/>");              
         if($(this).is(':checked')) {
            var summary;
            if($("#" + quotename).length == 0) {
              //it doesn't exist
            //  alert("here");
              summary = "<div id='"+quotename+"'>"+ quotename +" $" + price + " </div>\n";
              $(".quote-sumamry").append(summary);
            }
            else {
              $("#"+quotename).html(quotename +" $"+ price + " <br/>");
            } 
            $("#"+quotename).show();
         }
         else {
            $("#"+quotename).hide();
         }
         calculateSum();

      });
    });

    function calculateSum() {
      var sum = 0;
      $("input.quote-input").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
          sum += parseFloat($(this).data('price')) * parseFloat(this.value);
        }
      });

      $(".special-input:checked").each(function() {
        sum += parseFloat($(this).data('price'));
      });

      sum = sum.toFixed(2);

      $("#quoteTotal").html(sum);

    }


</script>

$（文档）.ready（函数（）{
$（“input.quote输入”）。每个（函数（）{
$（this）.keyup（function（）{
//警报（$（this.attr（'data-price'））；
var price=parseFloat（$（this.data（'price'））*parseFloat（this.value）；
价格=price.toFixed（2）；
var quotename=$（this.attr（'name'）；
if（该值）{
//$（“.quote SUAMRY”）。追加（quotename+“$”+价格+“
”；
var汇总；
if（$（“#”+quotename）.length==0）{
//它不存在
summary=“”+quotename+“$”+price+“\n”；
美元（“.quote sumamry”）。附加（摘要）；
}
否则{
$（“#”+quotename）.html（quotename+“$”+price+“
）；
}  
$（“#”+quotename.show（）；
}
否则{
$（“#”+quotename）.hide（）；
}
计算um（）；
});
});
$（“.special input”）。单击（函数（）{
//警报（$（this）.is（':checked'））；
var价格=$（this.attr（'data-price'）；
var quotename=$（this.attr（'name'）；
//$（“.quote SUAMRY”）。追加（quotename+“$”+价格+“
”；
如果（$（this）.is（':checked'））{
var汇总；
if（$（“#”+quotename）.length==0）{
//它不存在
//警报（“此处”）；
summary=“”+quotename+“$”+price+“\n”；
美元（“.quote sumamry”）。附加（摘要）；
}
否则{
$（“#”+quotename）.html（quotename+“$”+price+“
）；
} 
$（“#”+quotename.show（）；
}
否则{
$（“#”+quotename）.hide（）；
}
计算um（）；
});
});
函数calculateSum（）{
var总和=0；
$（“input.quote输入”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（$（this.data（'price'））*parseFloat（this.value）；
}
});
$（“.special input:选中”）。每个（函数（）{
sum+=parseFloat（$（this.data（'price'））；
});
总和=固定的总和（2）；
$（“#quoteTotal”）.html（总和）；
}

您可以在输入中添加

数据名

属性，以便我们知道要在摘要中显示的名称。然后，使用HTML中id为

quote summary

的div，您可以使用此JS函数计算总和并显示摘要：

function calculateSum() {
  var summary = [];
  var sum = 0;
  $("input.quote-input, .special-input:checked").each(function() {
    if ($(this).prop('checked') || (!isNaN(this.value) && this.value.length !== 0)) {
      var multiplier = $(this).prop('checked') ? 1 : parseFloat(this.value);
      var price = parseFloat($(this).data('price')) * multiplier;
      var name = $(this).data('name');
      sum += price;
      summary.push(name + '\t$' + price.toFixed(2));
    }
  });

  $("#quoteTotal").html(sum.toFixed(2));
  $('#quote-summary').html(summary.join('<br>'));
}

函数calculateSum（）{
var汇总=[]；
var总和=0；
$（“input.quote-input，.special input:checked”）。每个（函数（）{
if（$（this.prop（'checked'）| |（！isNaN（this.value）和&this.value.length！==0））{
var乘数=$（this.prop（'checked'）？1:parseFloat（this.value）；
var price=parseFloat（$（this）.data（'price'））*乘数；
变量名称=$（this.data（'name'）；
总和+=价格；
summary.push（name+'\t$'+price.toFixed（2））；
}
});
$（“#quoteTotal”）.html（sum.toFixed（2））；
$（'#quote summary'）.html（summary.join（'
'））；
}

---

这里有一把小提琴：

这是你想要的那种东西吗

$（文档）.ready（函数（）{
$（“input.quote输入”）。每个（函数（）{
$（this）.keyup（function（）{
//警报（$（this.attr（'data-price'））；
var价格=$（this.attr（'data-price'）；
var quotename=$（this.attr（'name'）；
$（“.quote summary”）。追加（quotename+“$”+价格+“
”；
计算um（）；
});
});
$（“.special input”）。单击（函数（）{
console.log（'click'）；
//警报（$（this.attr（'name'））；
var价格=$（this.attr（'data-price'）；
var quotename=$（this.attr（'name'）；
$（“.quote summary”）。追加（quotename+“$”+价格+“
”；
计算um（）；
});
});
函数calculateSum（）{
var quote=0；
$（'input'）。每个（函数（）{
var span=$（'span#'+this.id）
如果（跨度）{
如果（this.type=='checkbox'）{
如果（this.checked）{
quote+=parseFloat（document.querySelector（'span#'）+this.id.innerHTML=this.getAttribute（'data-price'））
}否则{
document.querySelector（'span#'+this.id）.innerHTML=''；
}
}else if（this.type==“text”）{
var值=parseFloat（this.value）；
如果（！isNaN（值））{
document.querySelector（'span#'+this.id）.innerHTML=（（value*this.getAttribute（'data-price'））.toFixed（2））；quote+=（value*this.getAttribute（'data-price'））；
}否则{
document.querySelector（'span#'+this.id）.innerHTML=''；
}  
} 
}
});
var总和=0；
$（“input.quote输入”）。每个（函数（）{
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（$（this.data（'price'））*parseFloat（this.value）；
}
});
$（“.special input:选中”）。每个（函数（）{
sum+=parseFloat（$（this.data（'price'））；
});
$（“#quoteTotal”）.html（sum.toFixed（2））；
}

div.qu