実現したいこと
チェックボックスを<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>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
input reset cookie削除と検索しましたが該当する回答が得られませんでした
補足
リセットをクリック後に再度チェックボックスをクリックした場合は
cookieは作動しました

回答2件
あなたの回答
tips
プレビュー