使用多个表单复选框中的选项更新Javascript URL

在前端开发中，使用多个表单复选框中的选项更新 JavaScript URL 可以通过以下步骤实现：

首先，需要在 HTML 中创建多个表单复选框，以供用户选择。可以使用 <input> 元素的 type 属性设置为 "checkbox" 来创建复选框。

<input type="checkbox" id="option1" value="option1">
<label for="option1">选项1</label>

<input type="checkbox" id="option2" value="option2">
<label for="option2">选项2</label>

<!-- 添加更多复选框 -->

接下来，使用 JavaScript 监听复选框的变化事件，并根据选中的选项更新 URL。可以使用 addEventListener 方法来添加事件监听器。

// 获取复选框元素
const option1Checkbox = document.getElementById('option1');
const option2Checkbox = document.getElementById('option2');

// 监听复选框变化事件
option1Checkbox.addEventListener('change', updateURL);
option2Checkbox.addEventListener('change', updateURL);

// 更新 URL 的函数
function updateURL() {
  let url = 'https://example.com?';

  // 检查选中的选项并更新 URL
  if (option1Checkbox.checked) {
    url += 'option1=true&';
  }
  if (option2Checkbox.checked) {
    url += 'option2=true&';
  }

  // 移除最后一个字符（多余的 & 符号）
  url = url.slice(0, -1);

  // 更新浏览器地址栏的 URL
  window.history.replaceState(null, null, url);
}

在上述代码中，我们首先获取了复选框元素，并为其添加了变化事件的监听器。当复选框的选中状态发生变化时，会触发 updateURL 函数。该函数会根据选中的选项构建一个新的 URL，并使用 window.history.replaceState 方法更新浏览器地址栏的 URL。