问题 创建计算字段的报价摘要


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

我试着从我提供的小提琴中得到的结果样本：

假设文本1的输入为3，并检查前两个复选框

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

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

https://jsfiddle.net/evvaw9ta/


8226
2017-09-05 03:30


起源

答案:

你可以添加一个 data-name 属性到输入，以便我们知道要在摘要中显示的名称。然后，使用带有id的div quote-summary 在HTML中，您可以使用此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/


9
2017-09-07 03:54



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

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

2
2017-09-05 08:52


这种作品。但是，我有两个错误。如果我在文本字段中键入金额并按任意键，则会继续添加到摘要（但不是总报价）。此外，它确实添加了输入中的值，它只是添加了它在更改任何内容时删除或更新的初始价格。我希望它显示该领域的总价格。因此，如果他们输入1，它在技术上将起作用。但是，如果他们输入摘要则不正确。 jsfiddle.net/evvaw9ta/1 - Lynx
编辑合并...请检查。 - T.Shah

答案:

你可以添加一个 data-name 属性到输入，以便我们知道要在摘要中显示的名称。然后，使用带有id的div quote-summary 在HTML中，您可以使用此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/


9
2017-09-07 03:54



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

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

2
2017-09-05 08:52


这种作品。但是，我有两个错误。如果我在文本字段中键入金额并按任意键，则会继续添加到摘要（但不是总报价）。此外，它确实添加了输入中的值，它只是添加了它在更改任何内容时删除或更新的初始价格。我希望它显示该领域的总价格。因此，如果他们输入1，它在技术上将起作用。但是，如果他们输入摘要则不正确。 jsfiddle.net/evvaw9ta/1 - Lynx
编辑合并...请检查。 - T.Shah

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

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


2
2017-09-13 02:50



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来