igorperegudov
@igorperegudov
Frontend-developer

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

Есть три радио и два дива. В первом радио: значение из инпута № 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, но тогда работает после клика и значение динамически не появляется.

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

Ниже скрин:
8cfa343083f6435e8d0211fade03df14.jpg
На стилизацию не обращаем внимания :)
  • Вопрос задан
  • 199 просмотров
Решения вопроса 2
nazares
@nazares
Web-Developer
Ответ написан
Комментировать
igorperegudov
@igorperegudov Автор вопроса
Frontend-developer
Переписал вот так, в 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())) );
    }
    
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы