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

実現したいこと

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

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

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

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

該当のソースコード

html

1<script type="text/javascript" src="jquery.cookie.js"></script>2<form name="checkList">3 <label><input type="checkbox" name="checkBox" value="cb1">チェックボックス1</label>4 <label><input type="checkbox" name="checkBox" value="cb2">チェックボックス2</label>5 <label><input type="checkbox" name="checkBox" value="cb3">チェックボックス3</label>6 <input type="reset" name="checkReset" value="チェックをリセット">7 <script>8 jQuery(function($){9 if($.cookie("checkBox_selected_value")){10 var load_values = $.cookie("checkBox_selected_value").split(",");11 for(var i = 0; i < load_values.length; ++i){12 load_values[i] = decodeURIComponent(load_values[i]);13 }14 $("input[type=checkbox][name=checkBox]").each(function(){15 this.checked = $.inArray(this.value, load_values) != -1;16 });17 }18 $("input[type=checkbox][name=checkBox]").change(function(){19 var save_values = [];20 $("input[type=checkbox][name=checkBox]").each(function(){21 this.checked && save_values.push(encodeURIComponent(this.value));22 });23 $.cookie("checkBox_selected_value", save_values.join(","));24 });25 });26 </script>27</form>

試したこと・調べたこと

上記の詳細・結果

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

補足

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

コメントを投稿

0 コメント