チェックボックスの値を保持したい
Q&A
画面遷移を繰り返してもチェックボックスのチェックが残ったままにするため、コードを見様見真似で書いているのですがうまくいきません。ご教示いただけたら幸いです。
該当するソースコード js
window.onload = function onLoad() {
//コース選択済み表示
const date = document.getElementsByName("course");
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;
}
}
//未入力チェック
if(course.length === 0){
alert("コースが選択されていません");
return;
}else if(pay.length === 0){
alert("お支払方法が選択されていません");
return;
}
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]);
window.location.href = 'html 申し込み画面.html';
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="input2.css">
<script type="text/javascript" src="input2.js" charset="shift_jis"></script>
</head>
<h2>2.申し込み情報入力</h2>
<body>
<table >
<tr>
<th>コース</th>
<th></th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a" value="A"> A
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a" id="a" value="B"> B
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a"value="C"> C
</th>
</tr>
<th></th>
<th>
<input type="checkbox" name="a"id="a"value="D"> D
</th>
</tr>
<tr>
<th></th>
<th>
<input type="checkbox" name="a" id="a"value="E"> E
</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th>お支払い方法</th>
<th><input type="radio" name="level" id="level"value="代金引換">代金引換</th>
</tr>
<tr>
<th></th>
<th><input type="radio" name="level" id="level" value="コンビニ引き換え">コンビニ支払い</th>
</tr>
<tr>
<th></th>
<th><input type="radio" name="level"id="level" value="クレジットカード">クレジットカード</th>
</tr>
<tr>
<td colspan="2">
<input type="button" class="button" Value="戻る" onclick="history.go(-1);">
<input type="button" class="button"Value="次へ" onclick="check()" >
</td>
</tr>
</table>
</body>
</container>
</html>
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0
