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