由于缺乏額外的信息，我想出了這個，它應(yīng)該主要做你想做的事情，但是你需要決定你想要的 url 查詢名稱是什么，你希望如何/何時重置 url，如果你想要在值為 0 時顯示查詢值以及如何解析復(fù)選框值：
$( document ).ready(function() {
// Get the base URL
const baseUrl = location.href.replace(location.search, '');
// Find the Input elements
const collectCheckbox = document.getElementById('collect');
const platformInput = document.getElementById('nPlatform');
const platformBudInput = document.getElementById('PlatformBud');
const displayCheckbox = document.getElementById('display');
const numStoresInput = document.getElementById('nStores');
const storeBudInput = document.getElementById('storBud');
// Attach listeners to the Input elements
collectCheckbox.addEventListener('change', updateUrl);
platformInput.addEventListener('input', updateUrl);
platformBudInput.addEventListener('input', updateUrl);
displayCheckbox.addEventListener('change', updateUrl);
numStoresInput.addEventListener('input', updateUrl);
storeBudInput.addEventListener('input', updateUrl);
var timeout = null;
function calculatePrice() {
var collectCheck = document.getElementById('collect');
var displayCheck = document.getElementById('display');
var xPlatfor = document.getElementById('nPlatform').value;
var pBudget = document.getElementById('PlatformBud').value;
var xStore = document.getElementById('nStores').value;
var sBudget = document.getElementById('storBud').value;
var collectAmount,
collectBudget,
displayAmount,
displayBudget,
pricePerMonth,
pricePerYear;
collectAmount = 0;
collectBudget = 0;
displayAmount = 0;
displayBudget = 0;
pricePerMonth = 0;
pricePerYear = 0;
if (collectCheck.checked == true && xPlatfor > 0 && pBudget > 0) {
collectAmount = pBudget;
}
if (displayCheck.checked == true && xStore > 0 && sBudget > 0) {
displayAmount = xStore * sBudget;
}
pricePerMonth = +collectAmount + +displayAmount;
pricePerYear = pricePerMonth * 12;
document.getElementById('pricePerM').innerHTML = pricePerMonth;
document.getElementById('pricePerY').innerHTML = pricePerYear;
}
function updateUrl() {
if (!(collectCheckbox.checked || displayCheckbox.checked || platformInput.value || platformBudInput.value || numStoresInput.value || storeBudInput.value)) {
return baseUrl;
}
let newUrl = new URL(`${baseUrl}?`);
collectCheckbox.checked && newUrl.searchParams.append('collect', 1);
displayCheckbox.checked && newUrl.searchParams.append('display', 1);
platformInput.value && newUrl.searchParams.append('platforms', platformInput.value);
platformBudInput.value && newUrl.searchParams.append('platformBudget', platformBudInput.value);
numStoresInput.value && newUrl.searchParams.append('numStores', numStoresInput.value);
storeBudInput.value && newUrl.searchParams.append('storeBud', storeBudInput.value);
history.pushState({}, '', newUrl.toString());
}
calculatePrice();
document.addEventListener('click', function (e) {
if (e.target.name == 'question_1') {
calculatePrice();
}
});
});
如有任何疑問，請告訴我。
