在会话存储中保留多个复选框状态

Question

My program needs to store the value of multiple checkboxes in session Storage (checked or not checked), so that when the user returns to this page they are already checked or not checked. All the solutions to this problem that I have found involve the use of JQuery which we aren't supposed to use.

This is the HTML for the checkboxes

<fieldset>
    <legend>Skills List</legend>
    <p> <label for="teamwork">Teamwork</label>
            <input type="checkbox" id="teamwork" name="Skill[]" value="Teamwork" checked="checked"/>
        <label for="rubyskills">Ruby Experience</label>
            <input type="checkbox" id="rubyskills" name="Skill[]" value="Rubyskills"/>
        <label for="efficiency">Efficiency</label>
            <input type="checkbox" id="efficiency" name="Skill[]" value="Efficiency"/>
        <label for="communication">Communication</label>
            <input type="checkbox" id="communication" name="Skill[]" value="Communication"/>
        <label for="other">Other</label>
        <input type="checkbox" id="other" name="Skill[]" value="other"/>
    </p>

Answer 1

so, in vanilla JS this is how you would go about getting all of the checked inputs in your given fieldset. If you could update your question with a bit more detail and code on how you are saving to session storage I can help further.

let fieldset = document.getElementById("fieldset1") // get fieldset element
let p = fieldset.children[1]; // the p tag
let pchildren = p.children; // the contents of the p tag
let inputs = []; // where we will hold the input elements that are checked
for (let x = 0; x < pchildren.length; x++) { // looping through to get only the inputs that are checked
  if (pchildren[x].nodeName == "INPUT" && pchildren[x].checked) {
    inputs.push(pchildren[x]) // pushing into array
  }
}
console.log(inputs);

Answer 2

Thanks but I solved it

function store_data() {
var teamwork = document.getElementById("teamwork").checked;
var rubyskills = document.getElementById("rubyskills").checked;
var efficiency = document.getElementById("efficiency").checked;
var communication = document.getElementById("communication").checked;

sessionStorage.setItem("teamwork", teamwork);
sessionStorage.setItem("ruby", rubyskills);
sessionStorage.setItem("efficiency", efficiency);
sessionStorage.setItem("communication", communication);
sessionStorage.setItem("other", other);
}


function prefill_form() {
if(sessionStorage.teamwork == "true") {
        document.getElementById("teamwork").checked = true;
    }
    if(sessionStorage.ruby == "true") {
        document.getElementById("rubyskills").checked = true;
    }
    if(sessionStorage.efficiency == "true") {
        document.getElementById("efficiency").checked = true;
    }
    if(sessionStorage.communication == "true") {
        document.getElementById("communication").checked = true;
    }
    if(sessionStorage.other == "true") {
        document.getElementById("other").checked = true;
    }

}