@capral1

Как изменить значение нескольких input в случае если галочка на них уже была нажата, а меняется значение в select?

Здравствуйте! Возникла проблема, с которой хотел бы разобраться, но не выходит.
Есть разметка:
<h3>Шаг 2. Выберите продукт, который предлагаете</h3>
        <label for="date">Выберите срок:</label>
        <select class="custom-select" name="due_date" style="appearance: none;" id="dateDue" required>
            <option value="1">1 месяц</option>
            <option value="3">3 месяца</option>
            <option value="6">6 месяцев</option>
            <option value="9">9 месяцев</option>
            <option value="12">12 месяцев</option>
        </select>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input tariff" id="premium" name="sections[premium]" value="premium">
            <label class="form-check-label" for="premium">Тариф1</label>
            <input type="number" class="form-control tariff-price" name="premium-price">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input tariff" id="optimum" name="sections[optimum]" value="optimum">
            <label class="form-check-label" for="optimum">Тариф2</label>
            <input type="number" class="form-control tariff-price" name="optimum-price">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input tariff" id="basic" name="sections[basic]" value="basic">
            <label class="form-check-label" for="basic">Тариф3</label>
            <input type="number" class="form-control tariff-price" name="basic-price">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input tariff" id="start" name="sections[start]" value="start">
            <label class="form-check-label" for="start">Тариф4</label>
            <input type="number" class="form-control tariff-price" name="start-price">
        </div>
        <p class="btn btn-primary nextToStepThree">Далее</p>
        </div>


и есть функция, которая делает запрос к серверу, достает оттуда json формата [{}] и раскидывает цены по 4 input в зависимости от тарифа, где Тариф1 самый дорогой, а Тариф4 - самый дешевый.
const premiumPrice = document.querySelector('input[name=premium-price]');
            const optimumPrice = document.querySelector('input[name=optimum-price]');
            const basicPrice = document.querySelector('input[name=basic-price]');
            const startPrice = document.querySelector('input[name=start-price]');
            const selectMonth = document.querySelector('#dateDue');
            const checkPremium = document.querySelector('input[id=premium]');
            const checkOptimum = document.querySelector('input[id=optimum]');
            const checkBasic = document.querySelector('input[id=basic]');
            const checkStart = document.querySelector('input[id=start]');

            function sendData() {
                let tariffPriceData;
                const checkboxes = document.querySelectorAll('.tariff');
                let tariffPrice = document.querySelectorAll('.tariff-price');
                checkboxes.forEach(function(checkboxElement) {
                    if (checkboxElement.checked) {
                        const url = 'price?month='+selectMonth.value;
                        const xhr = new XMLHttpRequest();
                        xhr.open('GET', url);
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                        xhr.send();
                        xhr.addEventListener("readystatechange", function() {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                tariffPriceData = JSON.parse(xhr.responseText);
                                tariffPriceData.forEach(function(tariffPriceDataElement) {
                                    if (tariffPriceDataElement.title === 'Тариф1') {
                                        premiumPrice.value = parseInt(tariffPriceDataElement.price);
                                    } else if (tariffPriceDataElement.title === 'Тариф2') {
                                        optimumPrice.value = parseInt(tariffPriceDataElement.price);
                                    } else if (tariffPriceDataElement.title === 'Тариф3') {
                                        basicPrice.value = parseInt(tariffPriceDataElement.price);
                                    } else if (
                                            tariffPriceDataElement.title === 'Тариф4') {
                                                startPrice.value = parseInt(tariffPriceDataElement.price);
                                        }
                                });
                            }
                        });
                    } else {
                        tariffPrice.forEach(function(element) {
                            if (element.checked === false) {
                                element.value = null;
                            }
                        });
                    }
                });
            }

            checkPremium.addEventListener("change", (event) => sendData());
            checkOptimum.addEventListener("change", (event) => sendData());
            checkBasic.addEventListener("change", (event) => sendData());
            checkStart.addEventListener("change", (event) => sendData());
            selectMonth.addEventListener("change", sendData);


Собственно, сейчас при нажатии на галочку, например, Тарифа1 проставляется цена во все input и при смене срока тарифа в выпадающем списке меняются все цены.

Как сделать, чтобы цена появлялась только в тех input, на которых галочка и, если галочек несколько, то при смене срока в выпадающем списке цена обновлялась во всех input на которых стоит галочка. Соответственно, убирая галочку -убирается и цена? Понимаю, что сделано не очень, надеюсь на ваше понимание.
P.S. Пожалуйста на js
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
scottparker
@scottparker
if(tariffPriceDataElement.title === 'Тариф1')
в этих условиях добавить проверку активности соответствующего чекбокса
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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