[JQ] Prosty kalkulator Opcje

[pietrov8]

Witam.

Mam taki mały kalkulator składający się z 4 elementów. Dwóch inputów których wartości są aktualizowane na zasadzie slidera z jQuery UI oraz dwóch inputów typu radio zależnych od siebie.

Poniżej przedstawiam szkielet jak to ma wyglądać:
http://jsfiddle.net/qWfdB/6/

Działanie jest banalne lecz nie wiem jak zatkualizować zmienne "na żywo".
Opiszę po krótce o co chodzi.
Mamy dwa inputy których wartość jest aktualizowana poprzez suwaki z jQuery UI. Ich wartości zmieniają się po stronie użytkownika. Chciałbym także by zmienne zawierające wartości tych inputów zmieniały się bez musu odświeżania strony. Tutaj najprawdopodobniej będę musiał zastosować funkcję bind(). Lecz prosiłbym o wskazówki.

Mamy również dwa inputy radio. Tutaj chciałbym by zmienna zawierała wartość inputu który jest aktualnie zaznaczony czyli którego atrybut checked jest checked. Najprawdopodobniej dla radio trzeba będzie zastosować funkcję click() jeżeli się nie mylę.

Wszystko ma się aktualizować po stronie użytkownika bez odświeżania strony.

Z góry dziękuję za wszelkie wskazówki i porady.

Pozdrawiam

[pietrov8]

Kod

    $(function() {
        var input = $('input:checked').val();    
        $('.nr3').val(5*12*input);
        $( ".stanowiska" ).slider({
            range: "min",
            value:14,
            min: 1,
            max: 12,
            step: 1,
            slide: function( event, ui ) {
                $("#amount1").val(ui.value);
                var cena1 = $('#amount').val();
                var cena2 = $('#amount1').val();
                var input = $('input:checked').val();
                $('.nr3').val(+ cena1 * +cena2);
                var cena = input * $('.nr3').val();
                $('.nr3').val(cena);
            }
        });
        $( "#amount1" ).val($( ".stanowiska" ).slider( "value" ) );
    });
    // slider 2
    $(function() {
        var input = $('input:checked').val()
        $('.nr3').val(5*12*input)
        $( ".abonament" ).slider({
            range: "min",
            value:5,
            min: 1,
            max: 12,
            step: 1,
            slide: function( event, ui ) {
                $("#amount").val(ui.value);
                var cena1 = $('#amount').val();
                var cena2 = $('#amount1').val();
                $('.nr3').val(+ cena1 * +cena2);
                var input = $('input:checked').val()
                var cena = input * $('.nr3').val();
                $('.nr3').val(cena);
            }
        });
        $( "#amount" ).val( $( ".abonament" ).slider( "value" ) );

        
    });
            <div class="sowaki">
                <div class="stanowisko_box">
                    <label for="amount">Liczba stanowisk:</label>
                    <input type="text" id="amount1" />
                    <div class="stanowiska"></div>
                </div>
                <div class="orientacyjna">
                    <h5>Orientacyjna cena</h5>
                    <p><input type="text" class="nr3"></span> pln netto</p>
                </div>
                <div class="abonament_box">
                    <label for="amount">Okres abonamentu:</label>
                    <input type="text" id="amount" />
                    <div class="abonament"></div>
                </div>
            </div>

Działa jak należy tylko że zmiana ceny poprzez input radio następuje tylko gdy przesuniemy suwak. Co mam zmienić by tak nie było?