jQuery 檢查頁面加載時所有輸入的 state

Question

我有這個簡單的 jQuery 價格計算器，但它不檢查是否在頁面加載時選擇了輸入。

點擊 Banana 后會看到 Apple 被選中，但是如何讓它在開始時檢查所有內容呢？

我試圖在function之前添加ready和on load ，但由於某種原因它不起作用。

 $(document).ready(function() { $('.calculating').change(function () { var price = 0; $('.calculating').each(function(){ if ($(this).is(":checked")) { price += parseInt($(this).attr("data-price"), 10); } }) $(".price").text(price); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="apple" data-price="100" class="calculating" checked><label for="apple">Apple - 100$</label> <br /> <input type="checkbox" id="banana" data-price="100" class="calculating"><label for="banana">Banana - 100$</label> <br /> Total price: <span class="price">0</span>$

Answer 1

我可以通過添加.change(); 在代碼的末尾。 我想這是最簡單的解決方案。

 $(document).ready(function() { $('.calculating').change(function () { var price = 0; $('.calculating').each(function(){ if ($(this).is(":checked")) { price += parseInt($(this).attr("data-price"), 10); } }) $(".price").text(price); }).change(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="apple" data-price="100" class="calculating" checked><label for="apple">Apple - 100$</label> <br /> <input type="checkbox" id="banana" data-price="100" class="calculating"><label for="banana">Banana - 100$</label> <br /> Total price: <span class="price">0</span>$

Answer 2

因為文檔准備好時沒有調用事件更改。

您應該將計算總計的代碼移動到另一個 function calculateTotal並調用ready和change事件

$(document).ready(function() {
      calculateTotal();
})

$('.calculating').change(function () {
        calculateTotal();
});

function calculateTotal(){
        var price = 0;
        $('.calculating').each(function(){
            if ($(this).is(":checked")) {
             price += parseInt($(this).attr("data-price"), 10);
            }
        })
        $(".price").text(price);
}

 $(document).ready(function() { calculateTotal(); }) $('.calculating').change(function () { calculateTotal(); }); function calculateTotal(){ var price = 0; $('.calculating').each(function(){ if ($(this).is(":checked")) { price += parseInt($(this).attr("data-price"), 10); } }) $(".price").text(price); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="apple" data-price="100" class="calculating" checked><label for="apple">Apple - 100$</label> <br /> <input type="checkbox" id="banana" data-price="100" class="calculating"><label for="banana">Banana - 100$</label> <br /> Total price: <span class="price">0</span>$

Answer 3

而不是 $(this).is(":checked") 嘗試 $(this).prop('checked')