The check box value cannot be retained.

Asked 1 years ago, Updated 1 years ago, 251 views

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

javascript

2022-09-30 21:56

1 Answers

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.


2022-09-30 21:56

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.