用 JavaScript 在另一页面显示选定复选框

在Web开发中，经常会遇到需要在一个页面中选择某些选项，然后在另一个页面中显示这些选定内容的需求。使用JavaScript可以轻松实现这一功能，下面将详细介绍具体的实现方法。

我们需要在第一个页面中创建复选框。在HTML中，可以使用<input type="checkbox">标签来创建复选框，并为每个复选框设置唯一的id和value属性。例如：

<input type="checkbox" id="option1" value="选项1">选项1
<input type="checkbox" id="option2" value="选项2">选项2
<input type="checkbox" id="option3" value="选项3">选项3

接下来，我们需要编写JavaScript代码来获取用户选定的复选框。可以通过document.querySelectorAll()方法获取所有的复选框元素，然后使用循环遍历每个复选框，判断其是否被选中。如果被选中，则将其value值存储到一个数组中。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedOptions = [];

checkboxes.forEach(checkbox => {
  if (checkbox.checked) {
    selectedOptions.push(checkbox.value);
  }
});

然后，我们需要将选定的复选框值传递到另一个页面。可以通过URL参数的方式将数组转换为字符串，并将其添加到链接的href属性中。例如：

const link = document.getElementById('nextPageLink');
const queryString = '?selectedOptions=' + selectedOptions.join(',');
link.href = 'nextPage.html' + queryString;

在另一个页面中，我们可以使用JavaScript获取URL参数，并解析出选定的复选框值。然后，将这些值显示在页面上。

const urlParams = new URLSearchParams(window.location.search);
const selectedOptions = urlParams.get('selectedOptions').split(',');

const resultDiv = document.getElementById('result');
selectedOptions.forEach(option => {
  const p = document.createElement('p');
  p.textContent = option;
  resultDiv.appendChild(p);
});

通过以上步骤，我们就可以使用JavaScript在另一个页面中显示选定的复选框值了。这种方法简单实用，可以在各种Web应用中广泛应用。