javascript - 如何获取单选的数据价格 - JavaScript

Question

现在我有了这个脚本，它工作正常，但是当我尝试选择一个 radio +复选框时，我只有基本价格+复选框值，我想要基本价格+ radio +复选框。你能帮助我吗？ :)

if (document.getElementById("getPrice")) {
  var basePrice = parseFloat(document.getElementById("getPrice").value);
  $(".choice").click(function() {
    var newPrice = basePrice;
    newPrice += parseFloat($(this).attr('data-price'));
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  });
}

.choice {
  height: 50px;
  width: 50px;
  background: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="getPrice" value="899">

<div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="99" title="" data-original-title="+ 99 PLN">
<input type="radio" class="calculate" name="option1" value="House" checked="checked">
</div>

<div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="25" title="" data-original-title="+ 99 PLN">
<input type="radio" class="calculate" name="option1" value="House" checked="checked">
</div>

<div class="choice active" data-toggle="wizard-checkbox" rel="tooltip" data-price="122" title="" data-original-title="+ 99 PLN">
<input type="checkbox" class="calculate" name="option1" value="House" checked="checked">
</div>
<a id="item-price">899</a>

Answer 1

您发布的代码不完整，我必须自己填写。如果您希望在元素中使用自定义属性，请使用 attr='value' 模式。

if (document.getElementById("getPrice")) {
  var basePrice = parseFloat(document.getElementById("getPrice").value);
  $(".choice").find('input[type=radio]').click(function() {
    var newPrice = basePrice;
    if ($(".choice").find('input[type=checkbox]').is(':checked')) {
      newPrice = parseFloat($(this).parent().attr('data-price')) + parseInt($(".choice").find('input[type=checkbox]').parent().attr('data-price')) + basePrice;
      newPrice = newPrice.toFixed(2);
      console.log(newPrice);
    } else {
      console.log(basePrice + parseFloat($(this).parent().attr('data-price')));
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <input type="input" id="getPrice" value="899">

  <div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="99" title="" data-original-title="+ 99 PLN">
    <input type="radio" class="calculate" name="option1" value="House" checked="checked">
  </div>

  <div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="25" title="" data-original-title="+ 99 PLN">
    <input type="radio" class="calculate" name="option1" value="House" checked="checked">
  </div>

  <div class="choice active" data-toggle="wizard-checkbox" rel="tooltip" data-price="122" title="" data-original-title="+ 99 PLN">
    <input type="checkbox" class="calculate" name="option1" value="House" checked="checked">
  </div>
  <a id="item-price">899</a>
</div>