復選框結果總和中未顯示jQuery小數

Question

下面的代碼對復選框進行求和並顯示結果。

我在stackoverflow的這個問題中得到了這段代碼。

的HTML

<input type="checkbox" checked value="Gez" rel="69.95">Gezichtsbehandeling
<input type="checkbox" value="ExtraLang" rel="9.95">Extra lange 
<input type="checkbox" value="Massage" rel="59.95">Massage
<input type="checkbox" value="Pedicure" rel="35">Pedicure

Totaal <span id="output"></span>

JS

<script>
$(document).ready(function() {
    function recalculate() {
        var sum = 0;

        $("input[type=checkbox]:checked").each(function() {
            sum += parseInt($(this).attr("rel"));
            ;
        });

        $("#output").html(sum);
    }

    $("input[type=checkbox]").change(function() {
        recalculate();
    });
});

</script>

問題是總和不顯示小數。

看到這里jsfidle

Answer 1

根據您的JSFiddle：

$("input[type=checkbox]:checked").each(function() {
        sum += parseFloat($(this).attr("rel"));
    });

將parseInt更改為parseFloat以保留小數點。

工作中的JSFiddle

更新：

根據您的要求以將輸出格式設置為小數點后兩位。.您需要更改

$("#output").html(sum);

至：

$("#output").html(sum.toFixed(2));

那應該給你想要的格式。

工作中的JSFiddle

Answer 2

顯然，這是因為parseInt正在剝離小數部分。 將其轉換為任意數字，而不是int。

sum += +$(this).attr("rel");

Answer 3

嘗試這個：

$("input[type=checkbox]:checked").each(function() {
    sum += parseFloat($(this).attr("rel"));
});

將parseInt替換為parseFloat。 這是jsFiddle： http : //jsfiddle.net/efvxefx1/2/

謝謝。

Answer 4

小數點后也要加上兩位數的和！

$("input[type=checkbox]:checked").each(function() {
            sum += parseFloat($(this).attr("rel"));
        });
     sum = sum.toFixed(2)
   $("#output").html(sum);

Answer 5

這是因為您在進行求和之前將其轉換為Int。 請更新您的代碼至以下-

sum += parseFloat($(this).attr("rel"));