创建计算字段的报价摘要

Question

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

我从我提供的小提琴中尝试获得的结果示例：

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

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

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

https://jsfiddle.net/evvaw9ta/

Answer 1

您可以将data-name 属性添加到输入，以便我们知道要在摘要中显示什么名称。然后，在您的 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>'));
}

这是一个小提琴：https://jsfiddle.net/3ef3ypLz/

Answer 2

您可以像这样创建摘要。您必须为表单元素提供恰当的名称才能创建适当的摘要。

<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>

Answer 3

这就是你所追求的那种东西......

        $(document).ready(function() {
      $("input.quote-input").each(function() {
        $(this).keyup(function() {
          //alert($(this).attr('data-price'));  
          var price = $(this).attr('data-price');
          var quotename = $(this).attr('name');
          $(".quote-summary").append(quotename +" $"+ price + " <br/>");
          calculateSum();
        });
      });
      $(".special-input").click(function() {
      console.log('click');
        //  alert($(this).attr('name'));
          var price = $(this).attr('data-price');
          var quotename = $(this).attr('name');
          $(".quote-summary").append(quotename +" $"+ price + " <br/>");            
        calculateSum();
      });
    });

    function calculateSum() {
      var quote = 0;
      $('input').each(function() {
        var span = $('span#'+this.id)
        if ( span ) {
          if ( this.type == 'checkbox' ) { 
            if ( this.checked ) { 
                quote += parseFloat(document.querySelector('span#'+this.id).innerHTML = this.getAttribute('data-price')) 
            } else { 
                document.querySelector('span#'+this.id).innerHTML = ''; 
            }
          } else if ( this.type == 'text' ) {
              var value = parseFloat(this.value); 
              if ( !isNaN(value) ) { 
                document.querySelector('span#'+this.id).innerHTML = ((value * this.getAttribute('data-price')).toFixed(2)); quote += (value * this.getAttribute('data-price')); 
              } else {
                document.querySelector('span#'+this.id).innerHTML = '';
              }  
          } 
        }
      });
      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'));
      });

      $("#quoteTotal").html(sum.toFixed(2));
    }

    div.quote-total {
  width: 300px;
  float: left;
}
span {
  width: 100%;
  float: left;
}
span:empty {
  display: none;
}
span#Text_1:before {
  content: 'Text 1 : $';
  width: 90px;
}
span#Text_2:before {
  content: 'Text 2 : $';
  width: 90px;
}
span#Text_3:before {
  content: 'Text 3 : $';
  width: 90px;
}
span#Text_4:before {
  content: 'Text 4 : $';
  width: 90px;
}
span#CheckBox_1:before {
  content: 'CheckBox 1 : $';
  width: 90px;
}
span#CheckBox_2:before {
  content: 'CheckBox 2 : $';
  width: 90px;
}
span#CheckBox_3:before {
  content: 'CheckBox 3 : $';
  width: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
Text 1
  <input id="Text_1" type="text" name="1" size="5" maxlength="2" class="quote-input" data-price="9.95">
  Checkbox 1
  <input id="CheckBox_1" type="checkbox" name="special_1" value="1" id="1" class="checkbox-hidden special-input" data-price="19.90">
  Checkbox 1
  <input id="CheckBox_2" type="checkbox" name="special_1" value="2" id="2" class="checkbox-hidden special-input" data-price="45.95">
  Checkbox 1
  <input id="CheckBox_3" type="checkbox" name="special_1" value="3" id="3" class="checkbox-hidden special-input" data-price="69.95">
  Text 1
  <input id="Text_2" type="text" name="2" size="5" maxlength="2" class="quote-input" data-price="7.50">
  Text 1
  <input id="Text_3"type="text" name="10" size="5" maxlength="2" class="quote-input" data-price="17.95">
  Text 1
  <input id="Text_4" type="text" name="11" size="5" maxlength="2" class="quote-input" data-price="19.95">
</div>
<div class="quote">
  <div class="quote-header">
    Quote
  </div>
  <div class="quote-sumamry">

  </div>
  <div class="quote-total">

    <span id="Text_1"></span>
    <span id="CheckBox_1"></span>
    <span id="CheckBox_2"></span>
    <span id="CheckBox_3"></span>
    <span id="Text_2"></span>
    <span id="Text_3"></span>
    <span id="Text_4"></span>
    <span>total</span>
    <span class="quote-sum" id="quoteTotal">0.00</span>
  </div>
</div>