Question

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

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

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

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

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

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

您可以像这样创建摘要。您必须为表单元素指定apt名称才能创建正确的摘要。

public class Component
{
    [Key]
    public virtual int ComponentId { get; set; }

    public virtual IList<Part> Parts { get; set; } = new List<Part>();
}

public class Part
{
    [Key]
    public virtual int PartId { get; set; }

    public virtual int ComponentId { get; set; }

    public virtual int RequiredCount { get; set; }
}

Answer 3

这是你追求的那种......

＆＃13;

        $(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));
    }

＆＃13;

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

＆＃13;

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

＆＃13;

创建计算字段的报价摘要

3 个答案: