checkbox:リロード時状態保持・ボタンクリックで初期化したい

Question

ブラウザのリロード時はcheckboxの状態を保持したいのですが、ボタンクリックで再度読み込ませた場合には状態をリセットしたいです。

<--! jsで再読み込みさせるトリガー -->
<select id="type1">
  <option value="10">カテゴリ1</option>
  <option value="11">カテゴリ2</option>
  <option value="12">カテゴリ3</option>
  <option value="13">カテゴリ4</option>
  <option value="14">カテゴリ5</option>
</select>
<input type="button" value="検索" class="select-button">

<--! 保持/リセットしたいチェックボックス -->
<div id="td1">
　　<div class="td1_reflesh">
　　　<form>
　　　<table>
　　　　<tr>
　　　　　<td width="130">
　　　　　　<input type="checkbox" name="check[]" value="0" id="img_1" data-savekey="1" class="checkbox">
　　　　　　<label for="img_1"><img src="images/button/check_outdoor.png"></label>
　　　　　</td>
　　　　　<td width="130">
　　　　　　<input type="checkbox" name="check[]" value="1" id="img_2" data-savekey="2" class="checkbox">
　　　　　　<Label for="img_2"><img src="images/button/check_indoor.png"></Label>
　　　　　</td>
　　　　　<td>
　　　　　　<input type="button" value="絞り込み" class="submit">
　　　　　</td>
　　　</tr>
　　</table>
　　</form>
　</div>
</div>

<script> 
// トリガーのクリックイベント
  $('.select-button').click(function(e){
    e.preventDefault();
    var num1 = $('#type1').val();
    _reflesh('Axis.php?type1=' + num1 );
    return false;
  });
  function _reflesh (url) {  
      var $content = $('#td1').html();
      $.ajax({
        'url': url,
        'dataType': 'html',
        'cache': false
      })
      .then(function(data) {
        // td1 リフレッシュ
        var $nextcontent = $(data).find('#td1');
        var $childcontent = $nextcontent.children('.td1_reflesh');
        $('#td1').html($childcontent);          // 書き換え
        window.history.pushState(null, null, url);
      },function(xhr, txtstat) {
        $content.html( '<p>エラーのため表示できません。</p>' );
      })
    }

// ブラウザリロード時に保持したチェックボックスの値を読み込む
function save_restore1_checkbox(target_class) {
 var cbstate;
 window.addEventListener('load', function () {
 cbstate = JSON.parse(localStorage['CBState'] || '{}');
 
  for (var key in cbstate) { 
    var el_lst = document.querySelectorAll('input[data-savekey="' + key + '"].' + target_class);
    set_checkbox_checked_all(el_lst, true);
  }
  var cb = document.getElementsByClassName(target_class);
  
  for (var c = 0; c < cb.length; c++) { 
    cb[c].addEventListener('click', function (evt) {
      var savekey = this.getAttribute('data-savekey');
      if (this.checked) {
        cbstate[savekey] = true;
      }else if (cbstate[savekey]) {
        delete cbstate[savekey];
      }
      localStorage['CBState'] = JSON.stringify(cbstate);
    });
   }
 });
 
  function set_checkbox_checked_all(el_lst, checked) {
    for (var c = 0; c < el_lst.length; c++) {
      var el = el_lst[c];
      if (el) {
        el.checked = checked;
      }
     }
  }
}
save_restore1_checkbox('checkbox');
</script>

試したこと

上記の処理ではボタンクリックで一見リセットされたように見えるのですが、ブラウザでリロードすると前の保存状態へ戻ってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

formにしてresetすればよいのでは？

※調整版

<script>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  let c=JSON.parse(localStorage.c||'[]');
  document.querySelectorAll('[type=checkbox]').forEach((x,y)=>{
    x.checked=c && c[y];
    x.addEventListener('change',e=>{
      c=[...document.querySelectorAll('[type=checkbox]')].map(x=>x.checked);
      localStorage.c=JSON.stringify(c);
    });
  });
  document.querySelector('#reload').addEventListener('click',()=>{
    location.reload();
  });
  document.querySelector('#f1').addEventListener('submit',async (e)=>{
    e.preventDefault();
    const t=e.target;
    const txt=await fetch('y.php',{method:"post",body:new FormData(t)}).then(res=>res.text());
    console.log(txt);
    document.querySelectorAll('[type=checkbox]').forEach(x=>x.checked=false);
    localStorage.removeItem('c')
  });
});
</script>
<form id="f1">
<label><input type="checkbox" name="check[]" value="0">0</label><br>
<label><input type="checkbox" name="check[]" value="1">1</label><br>
<label><input type="checkbox" name="check[]" value="2">2</label><br>
<input type="button" value="reload" id="reload">
<input type="submit" value="send">
</form>

//api.php

<?PHP
print_r($_POST);

Comments

[退会済みユーザー]

回答ありがとうございます。
httpやjsは初心者で手探りでコードを描いているもので・・恐縮ですが、コードでご教示頂けますでしょうか。

[yambejp]

sample追記しておきました

[退会済みユーザー]

ありがとうございます。
select optionをform input checkboxとするということでしょうか？

[yambejp]

ごめんなさい、意味がわかりません
質問はチェックボックスについてではないのでしょうか？

[退会済みユーザー]

はい、checkboxの状態の任意リセットについてですが、トリガーのボタンはoptionにぶら下がっているボタンです。
私の質問のコードが読みづらくすみません。

[yambejp]

私のサンプルは実行されましたか？
ロジックに詰まったときはなるべく簡便なソースから始めることです

内容的にはinputやselectなどの要素をformで囲う
その上でフォームをリセットすればinput要素（select含む）は初期値に戻ります
jQueryのajaxはfetchに置き換えてあります

[退会済みユーザー]

ありがとうございます。
回答頂いたコードではcheckboxの状態は残ったままでした。
とても丁寧に答えて下さりありがとうございます。

[yambejp]

リロードは残って、sendは残らないですよね？
もしそうでないならOSやブラウザの種類やバージョンが必要です

[退会済みユーザー]

sendボタンは反応がないのです。。はっきり確認はしていないですが、イベントが走っていないように思います。
頂いたサンプルのみのページを作成し再度試してみます。

[yambejp]

>sendボタンは反応がない

consoleに戻り値を表示しています。
PCのブラウザならF12をおした開発ツールに表示されているはずです

[退会済みユーザー]

ありがとうございます。
コンソール確認し、イベントは発生していましたが、checkboxの状態は残ったままです。

[yambejp]

うまく行かないということなので、大幅に書き換えておきました
winのchrome,firefox,edgeあたりでは動作確認してあります

[退会済みユーザー]

調整版ありがとうございます。
このコードで実現できました！
既に作り込んでからの仕様変更でしたので困っていまして本当に助かりました。
ありがとうございます。