Работа с radio, как реализовать следующее правильно?

Question

[Игорь Перегудов]

Есть три радио и два дива. В первом радио: значение из инпута № 1 * 3 и выводится во второй див, во втором инпуте: значение из инпута №1 * 3 * 1.1 в третьем инпуте: значение * 3 * 1.2. Инпут реализован через JQuery UI вот такой (ползунок в простонародии). Тянешь ползунок, выводится значение в инпут №1.

Например значение в первом диве == 100, из этого дива тянется во второй див, если checked радио № 1, то получается 300, если checked на втором радио то 330 и тд.

реализовал следующее:

$(document).ready(function () {
    $(".slider").slider({
        animate: true
        , range: "min"
        , value: 0
        , min: 0
        , max: 300
        , //Получаем значение и выводим его на странице
        slide: function (event, ui) {
            $("#slider-result").html(ui.value);
            
            if ($("#standard").attr("checked") != undefined){
                $("#comp-result").html($("#slider-result").text() * 3);
            }else if ($("#elite").attr("checked") != undefined){
                $("#comp-result").html(Math.round(($("#slider-result").text() * 3) * 1.1));
            }else if ($("#premium").attr("checked") != undefined){
                $("#comp-result").html(Math.round(($("#slider-result").text() * 3) * 1.1));
            }
        }
    });
    
});

Но срабатывает только на первый (он сразу checked), пробовал реализовывать через onclick, но тогда работает после клика и значение динамически не появляется.

Собственно вопрос, как сделать так, чтобы тянешь ползунок, во втором диве менялось содержимое динамически, при переключении радио значение менялось и при перетаскивании ползунка аналогично значение менялось динамически?

Ниже скрин:

На стилизацию не обращаем внимания :)

Comments

[lega]

https://jsfiddle.net/lega911/3rzdrdj6/

[Игорь Перегудов]

lega: такой способ для ie8 подойдет?

[lega]

Игорь Перегудов: да, с jquery должно от ie8

Answer 1

[Sergei Nazarenko]

так ? https://jsfiddle.net/wr3yhwd5/

Answer 2

[Игорь Перегудов]

Переписал вот так, в value в html добавил просто значения 3; 3.3; 3.6

$(document).ready(function () {
    $("#standard").attr("checked","checked");
    
    $(".slider").slider({
        animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: 300,
        
        //Получаем значение и выводим его на странице
        slide: function (event, ui) {
            $("#slider-result").html(ui.value);
            $(".complictation").on("click", function(){
                checkComp()
            })
            
            checkComp()
        }
    });
    
    function checkComp(){
        $("#comp-result").html( Math.round($( "input:checked" ).val() * parseInt($("#slider-result").text())) );
    }
    
});