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

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或form submit之类的值的第二个页面。它很容易显示在弹出窗口，但不显示在其他页面。

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

这是我正在使用的脚本，它在第2页中显示null。

 // 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

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

<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分配给复选框。

更新

搞错了。你拼错了“资格”。

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

资格!=资格和qualifiaction1 != qualification1

因此，请像这样更改var名称。

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

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

更新2

工作演示小提琴

Answer 2

在这里，您替换了值和缺失值属性-

$("#display_qualifications").text(qualification);
$("#display_qualifications").text(qualification1);

您可以看到display_qualifications区域不能同时显示两个值，因此需要将这两个值连接起来，例如-

var concatString = qualification + "" + qualification1;
console.log(concatString)

Answer 3

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">

2.附加结果而不覆盖

$("#display_qualifications").text(qualification + qualification1);