javascript - 提交后在另一个页面显示多个复选框的值

Question

我需要在表单提交时使用本地存储在另一个页面中显示多个复选框的值。

这是我有复选框的第一页。

<p id="qualifications">Qualifications:</p>
<label for="checkbox1">BE</label>
<input type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" value="MCA" id="checkbox2">

这是第二页，我想在表单提交上显示 MCA 或 BE 等值。在弹出窗口中很容易显示，但在其他页面中则不然。

<p> Qualification: <span id="display_qualifications"></span> </p>

这是我正在使用的脚本，它在第二页中显示为空。

 // qualification storing value of checkbox now need to store inside localstorage

var qualification = $("#checkbox1").val();
var qualification1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);

var qualification = localStorage.getItem("qualification");
var qualification1 = localStorage.getItem("qualification1");
$("#display_qualifications").text(qualification);
$("#display_qualifications").text(qualification1);

Answer 1

它显示为空，因为您没有设置第一页中复选框的值。

<p id="qualifications">Qualifications:</p>
<label for="checkbox1">BE</label>
<input type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" value="MCA" id="checkbox2">

为复选框分配值 MCA 和 BE。

更新

出现错误。您拼错了“资格”。

var qualifiaction = $("#checkbox1").val();
var qualifiaction1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);

资格 != 资格 且资格 1 != 资格 1

所以像这样更改变量名称。

var qualification = $("#checkbox1").val();
var qualification1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);

还要检查代码中的所有拼写。

更新2

工作演示 jsfiddle