添加、减去和动态更新表单值

Question

当单击表单输入时，我试图将它们的值相加以获得订单的总价。

与其试图用语言解释，不如用jsFiddle 来说明我正在尝试做的事情。

如果您单击顶行中的任何按钮并从一个按钮移动到另一个按钮，您所看到的效果会很好。如果在单击顶行中的按钮后，然后单击“添加 1 个专色”按钮，它也可以正常工作。

如果您在仍选中专色按钮的情况下尝试更改所需的卡片数量，则会出现问题。

您必须取消选择两行中的按钮，然后重新选择才能获得正确的值。

值应该是（仅顶行/添加底行）：

• 495 / 770
• 550 / 847
• 605 / 935

• 660 / 1012

  var spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, colour_price = 0, corner_price = 0;
  var spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', colour_desc = '', corner_desc = '';
  
  $('.order-option + label').click(function(e) {
  
      var radio = $(this).attr('for');
      radio = $('#' +radio );
  
      switch($(radio).attr('name')) {
          case 'specifications':
              spec_price = parseInt(radio.val());
              spec_desc = '<p>'+radio.data('title')+' </p>';
          break;
          case 'envelopes':
              env_price = parseInt(radio.val());
              env_desc= '<p>'+radio.data('title')+' </p>';
          break;
          case 'liners':
              liner_price = parseInt(radio.val());
              liner_desc ='<p>'+radio.data('title')+' </p>';
          break;
          case 'cards':
              card_price = parseInt(radio.val());
              card_desc = '<p>'+radio.data('title')+' </p>';
          break;
          case 'colours':
              colour_price = parseInt(radio.val());
              colour_desc = '<p>'+radio.data('title')+' </p>';
          break;
          case 'corners':
              corner_price = parseInt(radio.val());
              corner_desc = '<p>'+radio.data('title')+' </p>';
          break;
      }
  
      switch($(radio).attr('id')) {
          case 'specifications-radio1':
              $('#cards-radio').val('275');
          break;
          case 'specifications-radio2':
              $('#cards-radio').val('297');
          break;
          case 'specifications-radio3':
              $('#cards-radio').val('330');
          break;
          case 'specifications-radio4':
              $('#cards-radio').val('352');
          break;
      }
  
      var total_price = +spec_price + env_price + liner_price + card_price + colour_price + corner_price;
      var full_desc = spec_desc + env_desc + liner_desc + card_desc + colour_desc + corner_desc;
  
      if(radio.is(':checked')) {
          e.preventDefault();
          var subtract = parseInt(radio.val());
          var remove = radio.data('title');
          total_price = total_price - subtract;
          full_desc = full_desc.replace(remove,'');
          radio.removeAttr('checked');
          if($('.order-option:checked').length < 1) {
              spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, total_price = 0, colour_price = 0, corner_price = 0;
              spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', full_desc = '', colour_desc = '', corner_desc = '';
          }
      }
      // alert(total_price);
  
      $('.order-preview-total').html('$'+total_price+' (inc gst)');
      $('#order-preview-total').val('$'+total_price);
      $('.order-preview-content').html(full_desc);
      $('#order-preview-content').val(full_desc);
  
  });
  

有人知道我哪里出错了吗？

Answer 1

唷，我花了很长时间破译然后简化你的逻辑，然后弄清楚如何让单选按钮切换，然后得到正确的值，这些都源于你所问的问题。

首先我不得不说，你应该尝试使用 jQuery 选择器来避免编写那些长的 switch 语句，它们很难阅读和维护。

我将卡片和颜色选择器更改为这些，并将 card-radio 值移动到卡片单选元素中的数据属性（唯一的缺点是您需要检查单选组 isNaN 是否因为解析或选择未定义的变量抛出异常

    var spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, colour_price = 0, corner_price = 0;
    var spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', colour_desc = '', corner_desc = '';

    //card selected and a colour selected
    if($('#cards-radio').is(':checked') && !isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").data('card');
        card_price = parseInt(price);
        card_desc = '<p>'+$('#cards-radio').data('title')+' </p>';
    }

    //colour selected
    if(!isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").val();
        spec_price = parseInt(price);
        spec_desc = $("input:radio[name ='specifications']:checked").data('title');
    }

现在您的总数总是显示奇数的原因是触发 html 更改的标签单击事件将发生在单选按钮事件更改选中哪个事件之前（这花了我最长时间才弄清楚）。这意味着它会认为当前选择了先前选择的收音机并与您的计算混淆

因此，我没有使用标签点击作为事件，而是使用Rob Ws 解决方案将元素包装在 div 中并停止任何子元素的所有传播并手动执行（就像您尝试使用标签点击事件一样)。

Have a look here