如何获得无线电选择的数据价格 - JavaScript

时间:2017-02-24 18:40:59

标签: javascript

现在我有这个脚本,它工作正常,但当我尝试选择一个收音机+复选复选框我只有基本价格+复选框值我想要基本价格+收音机+复选框。 你能帮助我吗? :)



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
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')));
    }
  });
}
&#13;
<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>
&#13;
&#13;
&#13;