0

画面遷移を繰り返してもチェックした項目はチェックしたままにしたいのですが、チェックボックスだけうまく作動しません。わかる方いましたらご教示お願いします。

window.onload = function onLoad() {
//コース選択済み表示
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;
}
    
//お支払方法選択済み表示
var elements = document.getElementsByName("level");
var pay = sessionStorage.getItem("pay")
switch(pay){
    case "代金引換":
        elements[0].checked=true;
        break;
    case "コンビニ支払い":
        elements[1].checked=true;
        break;
    case "クレジットカード":
        elements[2].checked=true;
        break;
    default:
        break;      
}
}

function check(){
    //コースの値取得
    const course = [];
    const check = [];
    const a = document.getElementsByName("a");
    for(var i = 0; i < a.length; i++){
        if(a[i].checked){
            course.push(a[i].value);
        }
        check.push(a[i].checked);
    }
    
    //お支払方法の値取得
    var elements = document.getElementsByName("level");
    var len = elements.length;
    var pay = '';
    
    for (var i = 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]);
}
コース
<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

お支払い方法
<input type="radio" name="level" id="level" value="代金引換">代金引換
<input type="radio" name="level" id="level" value="コンビニ引き換え">コンビニ支払い
<input type="radio" name="level"id="level" value="クレジットカード">クレジットカード

<input type="button"  class="button"Value="次へ"  onclick="check()" >

1 件の回答 1

1

Session Storageに保存する部分では sessionStorage.setItem('A',course[0]); が並んでいるため、実際には次のような配列を作りたいのだと思います。

course == ["false", "false", "false", "true", "true"] // D, Eがチェックされている場合

しかし course の中身をconsole.log(course)で見てみると、["D", "E"]など、チェックをつけた箇所のvalueの配列になってしまっています。したがって、ソースコード中の次に示す部分を修正する必要があります。

    //コースの値取得
    const course = [];
    const check = [];
    const a = document.getElementsByName("a");
    for(var i = 0; i < a.length; i++){
        if(a[i].checked){
            course.push(a[i].value);
        }
    }

また、試行錯誤の痕跡でしょうか、sessionStorage.setItem('course', course);という行でcourseをそのまま保存しているのが見えます。私ならこの配列をループしてチェックボックスの値をセットするようにします。A, B, C, D, Eに続く新たなコースが追加された場合にも容易に対応できるからです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。