- ベストアンサー
JSのcheckbox状態保存について
JavaScriptでlocalstorageを使用してcheckboxの状態を保存したいです できるだけ短いコードで教えていただきたいです。
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- localStorageでのcheckbox制御
下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。 http://jsdo.it/twi_masa/hx8D 質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。 値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。 window.onload = function(){ 処理 } だと思い、 load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。 自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。 よろしくお願いします。 <table> <tr> <td>テキスト</td> <td><input type="text" id="text1" /></td> </tr> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <input type="button" value="ロード" onclick="hx8D.load();" /> <script> var hx8D = function(){ var HX8D = function(){}; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; } } }, load : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ elements[i].value = localStorage[key]; }else if(type == "checkbox"){ elements[i].checked = localStorage[key] == "true" ? true : false; } } }, }; return new HX8D(); }(); </script>
- ベストアンサー
- JavaScript
- checkboxについて
下のように初期状態でcheckboxにチェックされているのを buttonのresetをおすとjavascriptでチェック解除するということはできますか？ <INPUT TYPE="checkbox" name="check_no1" checked>
- ベストアンサー
- JavaScript
- localStorageでのcheckbox制御
下記記載のプログラムをこちらから改変して作成しました。 http://jsdo.it/twi_masa/hx8D 質問1 保存を押すとtrueかfalseの値が保存されますが、ページ読み込み直後にtrueだったらチェックあり。falseだったらチェックなしの状態にするにはどのように書けばよろしいでしょうか。 質問2 チェックボックス2も1と同様に使いたいのですが、どのように書けばよいのかわかりません。 よろしくお願いします。 <table> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <script> var hx8D = function(){ var HX8D = function(){ }; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; document.getElementsByName("checkbox1")[i].checked = true; } } }, }; return new HX8D(); }(); </script>
- ベストアンサー
- JavaScript
- checkboxの判定
初めまして、みなさんよろしくお願いします。 早速ですが質問させていただきたいと思います。 ※画面に30個程のcheckboxがあるのですが(それぞれのcheckboxには 1～30前後の番号を振っています)チェックされたcheckboxを取得する事は 出来ますでしょうか？ 出来るとしたらPHPでしょうか？ それともjavascriptでしょうか？ ちなみにjavascriptは全く解りません。(>_<) 身勝手な質問ですが、ご教授よろしくお願いします。
- ベストアンサー
- HTML
- JSの保存ダイアログについて
以下のコードは簡易メモ的なものです そこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか？ 調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>
- 締切済み
- JavaScript
- checkboxについて
初心者で簡単なことだと思われますがわかりません。 以下のようなcheckboxで「表示部分」をJavascriptで変更したい場合はどのように書いたらよいでしょうか。 <INPUT type="checkbox" name="IN1" value="表示">表示部分</INPUT> よろしくお願いいたします。
- ベストアンサー
- Java
- CheckBoxのコントロール配列について
VB2008を使用しています。 True状態のCheckBox1～70をButtonを押すことによってFalse状態にさせようとしていますが、一つずつコードを記載するのは長くなってしまうため以前こちらに投稿されていたTextBoxのコントロール配列を参考に下記のコードを作成しました。 Dim c As Integer For c = 1 To 70 Me.Controls("CheckBox" & c.ToString).Checked = False Next しかし、このコードでは下記のエラーが出てしまいます。 "CheckedはSystem.Windows.Forms.Controlのメンバではありません。" どなたかお知恵をお貸し下さい。
- ベストアンサー
- Visual Basic
- JSのコードで保存ができません
以下のコードなのですがnameの部分だけ保存ができません なぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>
- 締切済み
- JavaScript
- Checkbox について
どうしたらできるかわかりません、誰かが教えていただけません？ Checkboxを選択してほかのサイトに移動してまた戻ったら選択したのが初期化状態になってしまいます(選択されてない状態に戻る) コート以下です。 <ul> <li class="active"> お見舞い(発送)<input type="checkbox"></li> <li class="active"> お見舞い(受領)<input type="checkbox"></li> </ul>
- ベストアンサー
- HTML
- phpでチェック状態を保存するには
PHP勉強中の初心者です。 phpじゃなくてもいいのですが、チェックボックスのチェック状態を保存する方法を探しています。 簡単なphpサイトを作ったのですが、その中で進捗状況に応じて項目にチェックを入れたいと思っています。 （チェックを外す事もあります。） 例えば <table> <tr> <td><input type="checkbox" name="groupA" value=""></td> <td>りんごを買う</td> </tr> <tr> <td><input type="checkbox" name="groupA" value=""></td> <td>りんごを食べる</td> </tr> <tr> <td><input type="checkbox" name="groupB" value=""></td> <td>みかんを買う</td> </tr> <tr> <td><input type="checkbox" name="groupB" value=""></td> <td>みかんを食べる</td> </tr> </table> みたいな簡単な表です。 自分で使うだけなので、チェック状態をクッキーに保存してもいいのかもしれませんが、パソコンで見たりiphoneで見たりしたいので、クッキー以外で状態を保存したいです。 そして、これはできれば…でいいのですが、画面変遷はせずにチェック状態が保存できれば嬉しいです。 イメージは、ブログなどのいいねボタンや拍手ボタンなどのクリックした状態がその場で保存されるような感じです。 単純に表示で状態が確認できればいいので、チェックボックスじゃなくても構いません。 （項目をクリックすると色が変わるなど） 一応phpmyadminが使える環境にはあります。 具体的な回答をもらうには情報が少ないかもしれませんので、 例えば ・javascript+●●で～したらできる ・このサイトを見ると参考になる 等のアドバイスでもありがたいです。 ご指導の程、何卒よろしくお願い致します。
- ベストアンサー
- PHP
補足
回答ありがとうございます ご教授していただいた通り <body> <input type = "checkbox" id = checkbox1>CHECK!!<br> <script> localStorage.setItem("checkbox1_checked",document.getElementById("checkbox1").checked); </script> </body> と記入したのですが更新すると元通りになってしまいます <body> <input type = "checkbox" onclick="test1();" id = checkbox1>CHECK!!<br> <script> function test1(){ localStorage.setItem("checkbox1_checked",document.getElementById("checkbox1").checked); } </script> こういう風にも書いてみたのですが・・・。