チェックボックスの状態をLocalStorageに保存してリロードしても維持できるようにしたいです
テキストボックスはできたのですがチェックボックスができません
下記のコードだとどこをどう改善すればよいのでしょうか?
少し自分でも考えたいのでヒントをもらえるとありがたいです。
ギブアップしたときにご回答の方よろしくお願いいたします・・・。
JavaScript
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 5 <title>TItle</title> 6 <style> 7 .col-1 { 8 display: inline-block; 9 width: 200px; 10 /* border: solid 1px; */ 11 } 12 .col-2 { 13 display: inline-block; 14 width: 100px; 15 /* border: solid 1px; */ 16 } 17 </style> 18 19 20 </head> 21 <body> 22 <h1>カテゴリー</h1> 23 <hr> 24 <h2>要素一覧</h2> 25 <p> 26 <span class="col-1">要素A</span><input type="text" size="5" id="num1"> 27 <span class = "col-2"><input type="checkbox" id="c1">チェック</span> 28 </p> 29 <p> 30 <span class="col-1">要素B</span><input type="text" size="5" id="num2"> 31 <span class = "col-2"><input type="checkbox" id="c2">チェック</span> 32 </p> 33 <p> 34 <span class="col-1">要素C</span><input type="text" size="5" id="num3"> 35 <span class = "col-2"><input type="checkbox" id="c3">チェック</span> 36 </p> 37 <p> 38 <span class="col-1">要素D</span><input type="text" size="5" id="num4"> 39 <span class = "col-2"><input type="checkbox" id="c4">チェック</span> 40 </p> 41 <button id="save">Save</button> 42 43 <script> 44 45 $(function(){ 46 // 保存されている値があればそれを表示する 47 for(var i = 1; i < 5; i++){ 48 if(localStorage.getItem('num'+i)){ 49 $('#num'+i).val(localStorage.getItem('num'+i)); 50 } 51 52 if(localStorage.getItem('c'+i)){ 53 $('#c'+i).val(localStorage.getItem('c'+i)); 54 } 55 } 56 57 // Saveボタンが押されたら保存 58 $('#save').click(function(){ 59 for(var i = 1; i < 5; i++){ 60 localStorage.setItem('num'+i, $('#num'+i).val()); 61 console.log(localStorage.getItem('num'+i)); 62 63 if ($("#c" + i + ":checked").val()){ 64 $("c" + i).prop("checked",true); 65 localStorage.setItem('c'+i, $('#c'+i).val()); 66 } 67 } 68 }); 69 70 71 72 }); 73 74 75 </script> 76 77 </body> 78</html>
追加コード
JavaScript
1$(function(){ 2 // 保存されている値があればそれを表示する 3 for(var i = 1; i < 5; i++){ 4 if(localStorage.getItem('num'+i)){ 5 $('#num'+i).val(localStorage.getItem('num'+i)); 6 7 } 8 9 if(localStorage.getItem('check' + i)){ 10 $('#c' + i.toString()).prop('checked', true); 11 } 12 13 } 14 15 // Saveボタンが押されたら保存 16 $('#save').click(function(){ 17 for(var i = 1; i < 5; i++){ 18 localStorage.setItem('num'+i, $('#num'+i).val()); 19 console.log(localStorage.getItem('num'+i)); 20 21 var key = 'c' + i.toString(); 22 var check = $('#' + key); 23 if (check.prop('checked')) { 24 localStorage.setItem(key, check.val()); 25 } else { 26 localStorage.removeItem(key); 27 } 28 } 29 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/19 05:46
2018/11/19 06:04
退会済みユーザー
2018/11/19 06:09
2018/11/19 06:21
退会済みユーザー
2018/11/19 06:42
2018/11/19 06:53
退会済みユーザー
2018/11/19 08:10