2017-02-24 44 views
1

现在我有这个脚本,它工作正常,但是当我尝试选择一个收音机+检查复选框我只有基本价格+复选框值我想要基本价格+收音机+复选框。 你能帮我吗? :)如何获取数据价格收音机选择 - 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>

回答

0

您发布的代码是不完整的,我只好由我自己来填补它。 如果您想要使用元素中的自定义属性,请使用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>

+0

我没有看到任何diferents,我贴你的代码,并且NaN –

+0

也许是因为我有更多阶层的首选选择? –

+0

@MaciejWojtasik这不是将原始代码复制并粘贴到代码中。你必须调整它。你没有与我们分享你的整个代码,我无法精确地回答你... –