JavaScript - 根據選中的複選框更改輸出值

Question

我對JavaScript很新穎，我試圖編寫一些代碼，在表單中列出三個價格選項，如複選框。如果前兩者都選中，我希望總價格下降一定數量。

我的代碼是基於這個問題的代碼： Javascript checkboxes incorrect calculating

他們通過重置日期變量的基準值。我假設如果我有一個函數，如果這兩個框被選中，將基礎設置爲負值，那將實現我想要的。如果發生這種情況，我還希望輸出具有「每月保存（x）」的附加標籤。

但我不知道如何去關於變量與複選框..我需要使用jQuery按照how to change the value of a variable based on a select option:selected？

Answer 1

我假設你正在修改你的recalculate()功能來自您先前的問題。在此功能，您得到您的款項後，添加此應用的折扣：

if ($("#chkBox1,#chkBox2").filter(":checked").length == 2) 
{ 
    sum -= discount; 
} 

寫的留言給你的輸出，修改$("#output").html(sum)代碼這樣：

$("#output").html(sum + " Save $" + discount + " per month"); 

Answer 2

if (document.getElementById('checkBox1').checked && document.getElementById('checkBox2').checked) { 
    // Change the price 
} 

Answer 3

有很多方法可以解決這個問題。作爲提醒之前，我絕對不要在客戶端執行諸如「計算價格」之類的操作。也就是說，您可以計算價格以便向用戶顯示，但任何實際計算都應在服務器端完成（因爲客戶端可以調整和操作表單提交）。

我創建了一個簡單的例子，它將對選中的複選框的結果進行比較（並簡單地顯示結果）。有很多方法可以操縱這些代碼以適應您的目的。我已經使用了jQuery，但是還有其他一些有趣的選項可用於解決這個問題（例如，查看KnockoutJS）。

<input type="checkbox" class="adjust one" data-value="1.00" id="so1" /> <label for="so1">$1.00</label> <br/> 
<input type="checkbox" class="adjust two" data-value="2.00" id="so2" /> <label for="so2">$2.00</label><br/> 
<input type="checkbox" class="adjust one" data-value="3.00" id="so3" /> <label for="so3">$3.00</label> 

<p> 
    Total: <span class="total"></span> 
</p> 

然後，你想包括下面的JavaScript（以及jQuery庫）。

var total; 

var calculateTotal = function() { 
    total = 0.0; 
    $('input[type="checkbox"]:checked').each(function() { 
     total += parseFloat($(this).data('value')); 
    }); 
    $('.total').text(total); 
}; 

$(document).ready(function() { 

    $('input[type="checkbox"]').live('change', function() { 
    calculateTotal(); 
    }); 

    calculateTotal(); //do it for initial price 
}); 

calculateTotal（）將計算基於選擇匹配其對應的複選框（類型複選框的輸入）總「選中」。然後這將從每個複選框中提取數據屬性「值」，並根據該數字計算總數。你的問題的邏輯可能會有所不同，但只需調整calculateTotal應該處理這個問題。最後，只要複選框「更改」（最初一次），就會調用calculateTotal函數。

希望這應該是一個很大的幫助，讓你啓動和運行。這是一個JSFiddle現場演示。

Answer 4

jquery從來沒有必要，但它總是一個加號。因爲你正在學習JavaScript，我會建議不要使用框架。

首先你需要一個表（它會更好，如果你向我們展示您的形式是什麼樣子）：

<form> 

<input type="checkbox" id="first" /><label for="first">First Box</label> <br> 
<input type="checkbox" id="second" /><label for="second">First Box</label> <br> 

<input type="text" id="output" value="5.00"/> 

</form> 

現在的JavaScript

<script type="text/javascript"> 
    var first = document.getElementById("first"); 
    var second = document.getElementById("second"); 

    first.onchange = function() { 
    if (this.checked == true) { 
     document.getElementById("output").value = "new Value"; 
    }else { 
     document.getElementById("output").value = "other Value"; 
    } 
    } 

    ... the same can be done for 'second' .... 
</script>