I want to leave the checked items checked even after repeated screen transitions, but only the check box doesn't work well.Please let me know if you understand.
window.onload=function onLoad(){
// Course Selected View
const date = document.getElementsByName("a");
if(sessionStorage.getItem('A')==="true"){
date[0].checked=true;
}
if(sessionStorage.getItem('B')==="true"){
date[1].checked=true;
}
if(sessionStorage.getItem('C')==="true"){
date[2].checked=true;
}
if(sessionStorage.getItem('D')==="true"){
date[3].checked=true;
}
if(sessionStorage.getItem('E')==="true"){
date[4].checked=true;
}
// Payment method selected display
values = document.getElementsByName("level");
varpay=sessionStorage.getItem("pay")
switch(pay){
case "Cash on Delivery":
elements[0].checked=true;
break;
case "Convenience store payment":
elements[1].checked=true;
break;
case "Credit Card":
elements[2].checked=true;
break;
default:
break;
}
}
function check(){
// Get course value
const course = [ ];
const check = [ ];
consta = document.getElementsByName("a");
for (vari=0;i<a.length;i++) {
if(a[i].checked){
course.push(a[i].value);
}
check.push(a[i].checked);
}
// Get payment method value
values = document.getElementsByName("level");
varlen=elements.length;
var pay=';
for(vari=0;i<len;i++){
if(elements.item(i).checked){
pay=elements.item(i).value;
}
}
sessionStorage.setItem('course',course);
sessionStorage.setItem('pay',pay);
sessionStorage.setItem('A', course[0]);
sessionStorage.setItem('B', course[1]);
sessionStorage.setItem('C', course[2]);
sessionStorage.setItem('D', course[3]);
sessionStorage.setItem('E', course[4]);
}
course
<input type="checkbox" name="a" id="a" value="A">A
<input type="checkbox" name="a" id="a" value="B">B
<input type="checkbox" name="a" id="a" value="C">C
<input type="checkbox" name="a" id="a" value="D">D
<input type="checkbox" name="a" id="a" value="E">E
Payment Method
<input type="radio" name="level" id="level" value="Cash on delivery">Cash on delivery
<input type="radio" name="level" id="level" value="Convenience store exchange">Convenience store payment
<input type="radio" name="level" id="level" value="credit card">credit card
<input type="button"class="button"Value="Next" onclick="check()">
sessionStorage.setItem('A', course[0]);
are listed in the section to be saved in Session Storage, so I think you would actually like to create the following array:
course==["false", "false", "false", "true", "true"] // D, E is checked
However, if you look at the contents of the course
in console.log(course)
, you will see an array of value
where you checked it, such as ["D", "E"]
.Therefore, you need to modify the following parts of the source code:
// Get course values
const course = [ ];
const check = [ ];
consta = document.getElementsByName("a");
for (vari=0;i<a.length;i++) {
if(a[i].checked){
course.push(a[i].value);
}
}
Also, I can see that the course
is saved as it is in the line sessionStorage.setItem('course', course);
.If I were you, I would loop this array and set the check box value.It's easy to handle when new courses are added following A, B, C, D, and E.
© 2024 OneMinuteCode. All rights reserved.