Cześć,

Mam pytanie: jaki skrypt napisać, aby na bieżąco - lub jak kto woli 'na żywo' można było obserwować liczenie elementów na stronie, np.
1. Klikam w checkbox z lewej strony z opisem 1 owoc - z prawej automatycznie [z pozycji wyjściowej '0'] wyskakuje cena 2 złote
2. Klikam w kolejny checkbox z lewej strony z opisem 2 owoc - z prawej automatycznie [z pozycji wyjściowej '0'] wskakuje cena 2 złote
3. Chcę, aby automatycznie zliczało się naliczenie zaznaczonych wyżej opcji: np. 3 sztuki owoców - razem 10 zł.
Chodzi mi o to, aby formularz nie był przeładowany i nie przechodził na następną stronę.
Bardzo proszę o radę - pomoc, jak mogę to załatwić?

https://kawalekkodu.pl/milion-piecset-sto-d...-liczeniu-w-css

Najwygodniej takie interfejsy się robi frameworkami jak Angular czy Vue.js lub bibliotekami jak React. Ale możesz to też łatwo zrobić bez żadnych paczek, wystarczy coś w stylu (uproszczony HTML):

[JAVASCRIPT] pobierz, plaintext 
<form id="products-form">
    <input type="checkbox" data-price="1.99">
    <input type="checkbox" data-price="2.59">
    <input type="checkbox" data-price="0.89">
    <input type="checkbox" data-price="4.99">
    <div id="total-price"></div>
</form>
<script>
    function refreshPrice() {
        const totalPrice = [...document.querySelectorAll('#products-form input[type=checkbox]:checked')].reduce(
            (totalPrice, checkbox) => totalPrice + parseFloat(checkbox.dataset.price),
            0
        );
 
        document.getElementById('total-price').textContent = totalPrice.toFixed(2);
    }
 
    refreshPrice();
 
    document.getElementById('products-form').addEventListener('click', e => {
        if (e.target.matches('input[type=checkbox]')) {
            refreshPrice();
        }
    });
</script>
[JAVASCRIPT] pobierz, plaintext 

Wyświetlanie ceny tylko dla zaznaczonego produktu możesz zrobić w czystym CSS, jeśli checkbox i cena (albo wrapper ceny) są na tym samym poziomie hierarchii:

[CSS] pobierz, plaintext 
:checked ~ .price {
    /* style */
}
[CSS] pobierz, plaintext 

Hej,
Ok, działa, śmiga i dziękuję - a jak mógłbym dodać do tego, aby można było dodawać 'możliwość sztukowania' - np. coś kosztuje 1,95 a klient zamówił sobie 2 lub 3 sztuki.
Pytanie 2: czy jest możliwość, aby te wartości byłby przekazywane między np. 2 stronami: np. na jednej dokonuje wyboru a na drugiej mam potwierdzenie i aby jeszcze raz nie trzeba był liczyć od nowa?
Pozdrawiam.

Oczywiście, że można też zrobić sztukowanie. Tylko zastanów się jak to ma wyglądać - gdzie są do tego inputy itd.

Raczej nie przekazuje się danych w taki sposób, tylko liczy od nowa. Na stronie z potwierdzeniem możesz już po stronie serwera sobie to policzyć. To są na tyle proste obliczenia, że nikomu się krzywda nie stanie.