Javascript 如何在填写输入字段后向我的url添加参数&；选中复选框而不提交表单

我正在编写一个简单的费用计算器，我有一些复选框和文本输入，我需要将输入的值添加到我的url中，以便我可以将url发送给具有相同值的人。我已在字段值中设置了参数，例如：

value="<?= isset($_GET['collect']) ? $_GET['collect'] : '0' ?>"

value=“”

当我在url中手动键入参数时，一切正常，例如：

myurl.com/？collect=200&collectbudent=50

---

如果选中复选框或在输入字段中输入值，我需要在url中动态设置参数。她的是一个缺少额外信息的简单计算器的例子，我想到了这一点，它在很大程度上可以满足您的需要，但您需要决定您希望url查询名称是什么，如何/何时重置url，如果要在值为0时显示查询值以及如何解析复选框值：

$( 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();
    }
  });
});

---

如果有任何问题，请告诉我。

对不起，我不太明白你想要什么。如果有人键入

myurl.com/？collect=200&collectbudent=50

，那么您希望预填充特定字段吗？或者，您想在用户与输入字段交互时更改url？我给出了一个静态url的示例。是，我希望在输入字段更改时更改url；）是否只希望在collect或collectBudget字段更改时更改url？或者任何输入字段（文本字段和复选框）发生更改？谢谢，这正是我需要的，只有一个小问题，如果只选中其中一个主题，则参数收集或显示不能同时显示！好的，很酷，我更新了我的答案来反映这一点。如果一切正常，请告诉我！很高兴我能帮忙，祝你一切顺利！