※ ChatGPTを利用し、要約された質問です(原文:localStorageでのcheckbox制御)
localStorageでのcheckbox制御
このQ&Aのポイント
localStorageを使用して、チェックボックスの状態を保存するプログラムを作成しました。
ページ読み込み直後に保存された値を参照し、チェックボックスの状態を復元する方法を教えてください。
さらに、複数のチェックボックスを同様に制御する方法もお教えください。
下記記載のプログラムをこちらから改変して作成しました。
http://jsdo.it/twi_masa/hx8D
質問1
保存を押すとtrueかfalseの値が保存されますが、ページ読み込み直後にtrueだったらチェックあり。falseだったらチェックなしの状態にするにはどのように書けばよろしいでしょうか。
質問2
チェックボックス2も1と同様に使いたいのですが、どのように書けばよいのかわかりません。
よろしくお願いします。
<table>
<tr>
<td>チェックボックス</td>
<td>
<input type="checkbox" id="checkbox1" value="0">チェック1
<input type="checkbox" id="checkbox2" value="0">チェック2
</td>
</tr>
</table>
<input type="button" value="保存" onclick="hx8D.save();">
<script>
var hx8D = function(){
var HX8D = function(){
};
HX8D.prototype = {
save : function(){
var elements = document.getElementsByTagName("input");
for(var i=0; i<elements.length; i++){
var type = elements[i].type;
var key = elements[i].id;
if(type == "text"){
localStorage[key] = elements[i].value;
}else if(type == "checkbox"){
localStorage[key] = elements[i].checked;
document.getElementsByName("checkbox1")[i].checked = true;
}
}
},
};
return new HX8D();
}();
</script>
お礼
ページ読み込みが完了した時にというのがwindow.onload = function(){} ということは分かったのですが、それ以降どのように書けばいいのかがわかりませんでした。 質問内容を変えてもう一度投稿してみたいと思います。 ありがとうございました。