Вставьте переменную в HTML из атрибута входных данных

Question

Я пытаюсь вставить цену в элемент html, который я получаю из входного значения «data».

Первая функция работает идеально, но вторая всегда дает 0.

$(document).ready(function() {

    if ($('input[name="bedrooms"]').is(':checked')) {
        var bedroomPrice = $('input[name="bedrooms"]:checked').data('price');
    } else {
        var bedroomPrice = 0;
    }

    $('input').on('change', function() {
        $('#total').html(bedroomPrice);
    });

});

Подскажите, пожалуйста, что я делаю не так?

Answer 1

Вы используете присвоение значения переменной только при загрузке страницы. На самом деле вам нужно обновить значение переменной, когда ваш вход изменяется. Вот обновленный код JS:

$(document).ready(function() {
    var bedroomPrice = 0;
    $('input').on('change', function() {
        if ($('input[name="bedrooms"]').is(':checked')) {
            bedroomPrice = $('input[name="bedrooms"]:checked').data('price');
        } else {
            bedroomPrice = 0;
        }
            $('#total').html(bedroomPrice);
    });
});

Теперь он проверяет цены на спальни, когда ввод изменяется, что является последним значением.

Также, если у вас есть выбор из нескольких спален, и вы хотите показать толькоцена отмеченного флажка (учитывая, что пользователь может установить только один флажок одновременно). Пользователь this (который является текущим элементом элемента) вместо input[name="bedrooms"]. Таким образом, код JS будет выглядеть следующим образом:

$(document).ready(function() {
    var bedroomPrice = 0;
    $('input').on('change', function() {
        if ($(this).is(':checked')) {
            bedroomPrice = $('input[name="bedrooms"]:checked').data('price');
        } else {
            bedroomPrice = 0;
        }
        $('#total').html(bedroomPrice);
    });
});

Надеюсь, он будет работать для вас.