jQuery для проверки состояния всех входов при загрузке страницы

Question

У меня есть этот простой jQuery калькулятор цен, но он не проверяет, выбраны ли входы при загрузке страницы.

Он увидит, что Apple проверяется после нажатия на Banana, но как сделать проверить все при запуске?

Я пытался добавить ready и on load до function, но по какой-то причине это не работает.

$(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

Поскольку изменение события не вызывается, когда документ готов.

Вы должны переместить код для вычисления суммы в другую функцию 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 (": флажок") попробуйте $ (this) .prop ('флажок')