チェックボックスをinput resetでリセットした場合Cookieもリセットしたい

Question

実現したいこと

チェックボックスを<input type="reset"> を押した場合cookieも全てチェックボックスのチェックを外した状態cookeiを書き換えたい

発生している問題・分からないこと

メモ用にチェックボックスを使用し、チェックを付けたものを再度アクセスされた場合でも表示されるようにCookieに保存していますが
リストを初期化したい場合チェックボックスを<input type="reset">を使いチェックを全て外した場合
再度アクセスした場合<input type="reset">を押す前のチェックが入った状態になっています。

こちらのjQueryを使用してcookieを保存しています
https://plugins.jquery.com/cookie/

該当のソースコード

<script type="text/javascript" src="jquery.cookie.js"></script>
<form name="checkList">
	<label><input type="checkbox" name="checkBox" value="cb1">チェックボックス1</label>
	<label><input type="checkbox" name="checkBox" value="cb2">チェックボックス2</label>
	<label><input type="checkbox" name="checkBox" value="cb3">チェックボックス3</label>
	<input type="reset" name="checkReset" value="チェックをリセット">
	<script>
	jQuery(function($){
            if($.cookie("checkBox_selected_value")){
                var load_values = $.cookie("checkBox_selected_value").split(",");
                for(var i = 0; i < load_values.length; ++i){
                    load_values[i] = decodeURIComponent(load_values[i]);
                }
                $("input[type=checkbox][name=checkBox]").each(function(){
                    this.checked = $.inArray(this.value, load_values) != -1;
                });
            }
            $("input[type=checkbox][name=checkBox]").change(function(){
                var save_values = [];
                $("input[type=checkbox][name=checkBox]").each(function(){
                    this.checked && save_values.push(encodeURIComponent(this.value));
                });
                $.cookie("checkBox_selected_value", save_values.join(","));
            });
        });
	</script>
</form>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

input reset cookie削除と検索しましたが該当する回答が得られませんでした

補足

リセットをクリック後に再度チェックボックスをクリックした場合は
cookieは作動しました

Comments

[hentaiman]

自身で書かれたコードの理解はされていますか？
どのタイミングで何を見て何を条件にどこにどう変化を加えているかの説明は出来ますか？

Answer 1

jQueryのjquery-cookieライブラリはsameSiteの問題が解決できていないので使用は微妙です
js-cookieをお試しください

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script>
let v=JSON.parse(Cookies.get('checkBox_selected_value')??'[]');
window.addEventListener('DOMContentLoaded', ()=>{
  console.log([document.cookie,v]);
  v.forEach(x=>{document.querySelector(`[name=checkBox][value="${x}"]`).checked=true;});
});
document.addEventListener('reset',()=>{
  Cookies.remove('checkBox_selected_value');
});
document.addEventListener('change',()=>{
  v=JSON.stringify([...document.querySelectorAll('[name=checkBox]:checked')].map(x=>x.value));
  Cookies.set('checkBox_selected_value',v);
});
</script>
<form name="checkList">
<label><input type="checkbox" name="checkBox" value="あああ">チェックボックス1</label>
<label><input type="checkbox" name="checkBox" value="いいい">チェックボックス2</label>
<label><input type="checkbox" name="checkBox" value="ううう">チェックボックス3</label>
<input type="reset" name="checkReset" value="チェックをリセット">
</form>

※エンコードを確かめるためにあえてvalueに日本語をいれておきました

Answer 2

<script>
$('.resetBtn').on('click',function(){
    $.removeCookie("checkBox_selected_value");
});
</script>

こちらを追加する事で解決できました