如何使用成本计算器的范围输入为数字增加价值？

Question

我正在尝试创建一个费用计算器。 基本上，我在复选框输入中包含值，并且在选中它们时，使用jQuery将它们添加在一起。

$('.option').click(function() {
    var total = 0;
    $('.option:checked').each(function(){
        total += parseInt($(this).val());
    }); 
    $('.estimate').html('$' + total);
}); 

<input class="option" type="checkbox" value="1000"  />
<input class="option" type="checkbox" value="200"  />
<input class="option" type="checkbox" value="750"  />

因此，在上面的示例中，总数为1950。该函数的这一部分工作正常，但我想在公式中添加两个范围滑块。

<input class="range" type="range" min="0" max="3">
<input class="range" type="range" min="0" max="3">

滑块的4个位置中的每个位置都会增加添加到总体总数中的值。 如何将范围滑块位置添加到上述功能中？

这是jsFiddle： http : //jsfiddle.net/2MLKc/

Answer 1

只需使用输入的change事件：

http://jsfiddle.net/EfrainReyes/2MLKc/4/

$(document).ready(function() {

    var total;

    var addToTotal = function(){
        total += parseInt(this.value, 10);
    };

    var compute = function() {
        total = 0;
        $('.option:checked,.range').each(addToTotal);
        $('.estimate').text('$' + total);    
    };

    $('.option, .range').change(compute);
});

Answer 2

这是对使其生效的简单更改。

$('input').change(function() {
  var total = 0;
  $('.option:checked').each(function(){
    total += parseInt($(this).val());
  }); 
  $('.range').each(function(){
    total += parseInt($(this).val());
  });
  $('.estimate').html('$' + total);
});

http://jsfiddle.net/6DbFH/

Answer 3

好吧，您可以使用复选框执行类似的操作。 使用jQuery，您可以使用$（selector）.val（）获得滑块输入的值。

但是我建议抽象计算另一个函数并从$（'。option'）。click（function（）...和$（'。range'）。change（function（）...