根据更改选择获取备用数据值

时间:2017-03-21 15:44:29

标签: javascript jquery function checkbox input

我无法提出以下逻辑。我有两个复选框,每个复选框内有两个数据价格值。一个是solo-price,如果只选中一个复选框,我想使用它。然后,如果选中了两个复选框,我想要使用combined-price ...想想捆绑定价。

我有两个问题,都与合并定价有关。

- 当选中这两个复选框时,我无法弄清楚如何使用组合定价显示在package1-review-pricepackage2-price-review div中。基本上重写以下变量。

var package1Price = [];
var package2Price = [];

- 然后我的第二个问题与上述问题有直接关系。选中这两个复选框后,总计将获得solo-pricecombination-price的总和。它显示总额为46美元,应该是21美元。

calcTotalPrice函数中,我尝试嵌套总命令,就像这样...但它没有帮助。

if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        $('#package1:checked').each(function() {
          totalPrice += parseInt($(this).data('solo-price'));
        });
      }  

有没有人看到我的逻辑有什么问题?

Here is a fiddle.

    var package1Price = [];
    var package2Price = [];

    $('.product-check').on('change', function() {
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
				$('#packages-selected').toggle(100).html('Both packages selected');
      }
      if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        //Package 1 single Price
        var str = $('#package1:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product1-price-review').toggle().html(str);
        calcTotalPrice();
        //$('#packages-selected').toggle(100).html('Package 1 Selected');
      }
      else if ($('#package1').not(':checked')) {
      	$('#product1-price-review').toggle();
        package1Price = 0;
      }
      if ($('#package1').not(':checked') && $('#package2').is(':checked')) {
        var str = $('#package2:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product2-price-review').html(str);
        $('#product1-price-review').hide();
        calcTotalPrice();
        // $('#packages-selected').toggle(100).html('Package 2 Selected');
      }
      else if ($('#package2').not(':checked')) {
      	$('#product2-price-review').hide();
         package2Price = 0;
      }
    });

    function calcTotalPrice() {
      var totalPrice = 0;
      var tpPrice = 0;
      $('#package1:checked').each(function() {
        totalPrice += parseInt($(this).data('solo-price'));
      });
      $('#package2:checked').each(function() {
        tpPrice += parseInt($(this).data('solo-price'));
      });
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
        $('#package1:checked,#package2:checked').each(function() {
          tpPrice += parseInt($(this).data('combined-price'));
        });
      }
      $('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
    }
#packages-selected, #product1-price-review, #product2-price-review {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="product-check" id="package1" value="Product 1" data-solo-price="10" data-combined-price="8">
<input type="checkbox" class="product-check" id="package2" value="Product 2" data-solo-price="15" data-combined-price="13">
<p id="product1-price-review"></p>
<p id="product2-price-review"></p>
<p id="package-review-total"></p>
<p id="packages-selected"></p>

1 个答案:

答案 0 :(得分:1)

问题出在您的calcTotalPrice()功能中。请注意,即使您同时选中这两个复选框,也会为solo-prices添加值,因此总计为$ 46( 10 + 15 + 8 + 13 = 46)而不是所需的$ 21。

尝试解决问题:

function calcTotalPrice() {
  var totalPrice = 0;
  var tpPrice = 0;

  if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
    $('#package1:checked,#package2:checked').each(function() {
      tpPrice += parseInt($(this).data('combined-price'));
    });
  } else {
    $('#package1:checked').each(function() {
      totalPrice += parseInt($(this).data('solo-price'));
    });
    $('#package2:checked').each(function() {
      tpPrice += parseInt($(this).data('solo-price'));
    });
  }
  $('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
}