

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

[code]

    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]);
    }
[/code]

[code]

    コース
    <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()" >
[/code]


CC BY-SA 4.0
2021-06-14T07:45:14.487
77544
2022-04-24T01:02:55.460
2021-06-17T12:32:25.347
7500
46738
question
javascript
チェックボックスの値を保持できない。


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

[code]

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

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

[code]

        //コースの値取得
        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);
            }
        }
    
[/code]

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


CC BY-SA 4.0
2021-06-17T05:45:42.270
77620
2021-06-17T05:45:42.270
7500
77544
answer