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

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>

这是我正在使用的脚本，它在第二页显示为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和BE分配给复选框。

更新

得到错误。你拼错了“资格证书”。

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

qualifiaction！=资格和资格1！=资格1

所以改变这个var名称。

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

同时检查代码中的所有拼写。

更新2

工作演示jsfiddle

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);