Question

我有一个简单的表单，其中包含一些复选框选项和一个提交按钮。我想要实现的是，当访问者选择一个或多个选项时，单击按钮后将显示总价格（总和）。

总和（总和）必须放在最后一个id为＆＃39; uk-total-price＆＃39;的div中。基本价值是没有额外选项的价格。基本值，在本例中为19.500，是可见的。

是否可以使用javascript或jquery来完成这项工作？

<form>

<div id="uk-form-checkbox">
<input id="option 1" class="uk-checkbox-box" value="100" name="option 1" type="checkbox">
<label for="option 1" >option 1</label>
<input id="option 2" class="uk-checkbox-box" value="250" name="option 2" type="checkbox">
<label for="option 2" >option 2</label>
<input id="option 3" class="uk-checkbox-box" value="500" name="option 3" type="checkbox">
<label for="option 3" >option 3</label>
</div>

<div id="uk-form-submit">
<button id="submit" class="uk-submit-button" type="submit">Calculate Total</button>
</div>

<div id="uk-total-price">19.500</div>

</form>

Answer 1

我认为，如果你只是想打印结果，你可以使用简单的javascript代码。提交按钮将刷新你的页面。我改变了一点你的HTML代码，我写了js代码。只需复制我的答案并粘贴它在您的HTML文件中。对于任何英语错误...希望这有帮助！：）

<form>
<div id="uk-form-checkbox">
<input id="option-1" class="uk-checkbox-box" value="100" name="option 1" 
type="checkbox">
<label for="option-1" >option 1</label>
<input id="option-2" class="uk-checkbox-box" value="250" name="option 2" 
type="checkbox">
<label for="option-2" >option 2</label>
<input id="option-3" class="uk-checkbox-box" value="500" name="option 3" 
type="checkbox">
<label for="option-3" >option 3</label>
</div>
</form>

<div id="uk-form-submit" style="cursor:pointer;">
<div id="submit" class="uk-submit-button">Calculate Total</div>
</div>
<div id="uk-total-price"></div>

<script>
var button = document.getElementById("submit");
var result = document.getElementById("uk-total-price");

button.addEventListener( "click" , function(){

var options = document.getElementsByClassName('uk-checkbox-box');
var calc = 0;
var totalPrice = 19.5;    

 for (i = 0; i < options.length; i++) {
  if (options[i].checked) {
    calc = calc + parseInt( options[i].value );
  }
}
result.innerHTML = calc + totalPrice;

});
</script>

使用点击按钮上的javascript计算总数

1 个答案: