如何将step3.html函数中选中框数据传递至step4.html？

针对你的场景，有几种实用方法可以把step3.html的复选框选中数据传递到step4.html，下面结合你的代码给出具体实现：

方案1：通过URL参数传递（适合简单数据） #

在点击事件触发时，把选中的复选框数据拼接成URL参数，直接跳转到step4.html，step4页面再从URL中解析参数。

修改step3.html代码：

$("你的复选框选择器").click(function() {
  ddj(this);
});

function ddj(xx) {
  // 获取所有选中的复选框值，可根据实际场景调整筛选逻辑
  var selectedValues = [];
  $("input[type='checkbox']:checked").each(function() {
    selectedValues.push($(this).val());
  });
  // 把数组转成字符串，用逗号分隔
  var dataStr = selectedValues.join(",");
  // 跳转到step4.html并携带参数，encodeURIComponent避免特殊字符问题
  window.location.href = "step4.html?selected=" + encodeURIComponent(dataStr);
}

step4.html中解析参数并修改页面：

window.onload = function() {
  var urlParams = new URLSearchParams(window.location.search);
  var selectedData = urlParams.get('selected');
  if (selectedData) {
    // 把字符串转回数组
    var selectedValues = selectedData.split(",");
    // 示例：将选中项渲染到页面指定元素
    selectedValues.forEach(function(val) {
      $("#target-container").append("<p>已选中：" + val + "</p>");
    });
  }
};

方案2：使用localStorage存储数据（适合复杂/需要持久化的数据） #

如果数据结构复杂（比如要存复选框的文本、值等多属性），或者希望数据在浏览器中保留一段时间，可使用localStorage存储，step4页面读取后可选择清除数据。

修改step3.html代码：

$("你的复选框选择器").click(function() {
  ddj(this);
});

function ddj(xx) {
  // 收集选中复选框的详细数据
  var selectedItems = [];
  $("input[type='checkbox']:checked").each(function() {
    selectedItems.push({
      value: $(this).val(),
      label: $(this).next("label").text()
    });
  });
  // 把对象转成JSON字符串存入localStorage
  localStorage.setItem("selectedCheckboxData", JSON.stringify(selectedItems));
  // 跳转到step4.html
  window.location.href = "step4.html";
}

step4.html中读取并使用数据：

window.onload = function() {
  var storedData = localStorage.getItem("selectedCheckboxData");
  if (storedData) {
    var selectedItems = JSON.parse(storedData);
    // 示例：渲染选中项到页面
    selectedItems.forEach(function(item) {
      $("#content-area").append("<div>选项：" + item.label + "（值：" + item.value + "）</div>");
    });
    // 可选：用完后清除数据，避免下次进入页面残留
    localStorage.removeItem("selectedCheckboxData");
  }
};

方案3：使用sessionStorage（会话级存储） #

和localStorage用法几乎一致，但sessionStorage的数据仅在当前浏览器会话有效，关闭标签页就会自动清除，适合不需要持久化的临时数据场景。

step3中存储代码替换为：

// 替换localStorage为sessionStorage
sessionStorage.setItem("selectedCheckboxData", JSON.stringify(selectedItems));

step4中读取代码替换为：

var storedData = sessionStorage.getItem("selectedCheckboxData");
// 后续处理同localStorage，可选清除数据
sessionStorage.removeItem("selectedCheckboxData");

注意事项 #

• URL参数有长度限制，不适合传递大量数据；
• localStorage/sessionStorage仅支持存储字符串，复杂数据需先转成JSON格式；
• 如果需要在新窗口打开step4.html，也可以用window.open("step4.html?selected=xxx")结合URL参数实现。

内容的提问来源于stack exchange，提问作者Uvindu Induwara