• ベストアンサー

クッキーでこういうことできる？

クッキーでこういうことできますか？ チェックを入れたものをクッキーで保存しておく。 ページをリロードしても、チェックを入れたものは当日限りチェックが入ったまま。 日課管理用です。 今日のお仕事 <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="玄関掃除">玄関掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="トイレ掃除">トイレ掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="草取り">草取り<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="お茶だし">お茶だし<BR> ＃ＣＧＩなど使わず、javascriptのみで可能か。

質問者が選んだベストアンサー

  • ベストアンサー
noname#3345
noname#3345
回答No.3

何点か勘違いされているようなので、確認を。 まず、set()ではvalue値と配列とどちらを利用したいとお思いですか？ もしvalue値を使おうと思っているのであれば、配列の事は無視してください。 set()は下記のようになります。 function set(){ 　for (var i=0;i<document.main.mytask.length;i++){ 　if(document.main.mytask[i].value==cookieに書き込まれた値){ 　　document.main.mytask[i].checked=true; 　}else{ 　　document.main.mytask[i].checked=false; 　} } } つまり、mytaskの数分ループをまわして、cookieの値と突きあわせて、同じ物であればチェックをいれ、違うものであればチェックをはずす、という形ですね。 後は、document.cookieに入ってくる値を確認してくださいね。 document.cookieには、cookie名=cookie値という形式のものが入っています。 当然複数のcookieが入っていれば、[cookie名=cookie値;cookie名=cookie値]という形式になります。 この文字列の中から使いたいcookieを取り出さなくてはいけないのがわかりますよね？ その関数を追加してください。 取り出し方については、参考URLの「他」のページを見ていただければ参考にできるかと。 配列を使いたいのであれば、書き込みの部分から修正する必要がありますので、とりあえず早い方からご説明しました。 書き込まれた値と、取り出した値の違いにご注意ください。 もう少しなので、がんばって！(^-^) # それと、動作上特に問題はないですが、念のために行の終りには「;」をつけるクセをつけた方がいいですよ。

参考URL：
http://homepage1.nifty.com/kodayan/javasc/index.htm
s-holmes
質問者

お礼

とりあえずイントラで使えればいいので、下記のようにして一応使える状態になりました。cookie名称も漢字を使って対応。プロの採点では１０点くらいかもしれませんが、とりあえず・・ (^^; <SCRIPT language=JavaScript> function sakujo(){ for (var i=0;i<document.main.mytask.length;i++){ document.main.mytask[i].checked=false; if(getCookie(document.main.mytask[i].value)=="on"){ expires = new Date() expires.setTime(expires.getTime() + 12*60*60*1000*365) document.cookie = document.main.mytask[i].value + "=off" + ";expires=" + expires.toGMTString() } } } function checkset(){ for (var i=0;i<document.main.mytask.length;i++){ if(getCookie(document.main.mytask[i].value)=="on"){ document.main.mytask[i].checked=true; }else{ document.main.mytask[i].checked=false; } } } function memoryCookie(Msg) { expires = new Date() expires.setTime(expires.getTime() + 12*60*60*1000*365) document.cookie = Msg + "=on" + ";expires=" + expires.toGMTString() } function getCookie(name) { var cookieStr = document.cookie var existNum = cookieStr.indexOf(name) if(existNum != -1) { start = existNum + name.length + 1 end = cookieStr.indexOf(";" , start) if(end == -1) { end = cookieStr.length } var cookieValue = cookieStr.substring(start,end) return cookieValue } else { return "" } } </SCRIPT> <body onload="checkset();"> <form name="main"> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="玄関掃除" onclick="memoryCookie(this.value)">玄関掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="トイレ掃除" onclick="memoryCookie(this.value)">トイレ掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="草取り" onclick="memoryCookie(this.value)">草取り<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="ここ" onclick="memoryCookie(this.value)">ここ<BR> <A HREF="javascript:function voi(){};voi()" onClick="sakujo();">クリア</A> </form>

s-holmes
質問者

補足

お手数をおかけします。 いたれり尽くせりで・・申し訳ありません。 下記までたどりつきましたが、下記だとクリックした最後の値しか書き込めません。今のところ、下記限界。 (^^; <SCRIPT language=JavaScript> function set(){ for (var i=0;i<document.main.mytask.length;i++){ if(document.main.mytask[i].value==getCookie("mytask")){ alert(getCookie("mytask")) document.main.mytask[i].checked=true; }else{ document.main.mytask[i].checked=false; } } } function memoryCookie(Msg) { expires = new Date() expires.setTime(expires.getTime() + 24*60*60*1000*365) document.cookie = "mytask=" + Msg + ";expires=" + expires.toGMTString() } function getCookie(name) { var cookieStr = document.cookie var existNum = cookieStr.indexOf(name) if(existNum != -1) { start = existNum + name.length + 1 end = cookieStr.indexOf(";" , start) if(end == -1) { end = cookieStr.length } var cookieValue = cookieStr.substring(start,end) return cookieValue } else { return "" } } </SCRIPT> <body onload="set();"> <form name="main"> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="玄関掃除" onclick="memoryCookie(this.value)">玄関掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="トイレ掃除" onclick="memoryCookie(this.value)">トイレ掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="草取り" onclick="memoryCookie(this.value)">草取り<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="お茶だし" onclick="memoryCookie(this.value)">お茶だし<BR> </form>

その他の回答 (2)

noname#3345
noname#3345
回答No.2

日本語は確かに化ける可能性がありますね。 またcookieは登録できる数も容量も決まってますので、できるだけデータは少ない方がいいかと。 そこで、valueの値をそのまま書き込むのではなく、何番目の値かを書き込めばいいと思います。 見るところ、チェックボックスの名前は全部同じですので、mytask[n]という配列扱いになりますね。 なので、この[n]番目のもの、の[n]をcookieにセットしてやればいいかと。 そして、ページのonLoadで、 document.Form名.mytask[cookieから取り出した値].checked=true としてやれば、cookieに登録したチェックボックスを選択状態にできます。 ざっと概要だけですが、考え方さえわかればそれほど難しいものではないかと。 #1さんの参考URLに、ほとんど回答が書いてありますし、がんばってください～。

s-holmes
質問者

補足

回答ありがとうございました。 配列苦手なのでとりあえず、小規模イントラで動けばいいので、下記途中経過。set()の部分がよくわからず。 <SCRIPT language=JavaScript> function set(){ for (var i=0;i<document.main.mytask.length;i++){ alert(document.main.mytask[document.cookie]) document.main.mytask[document.cookie].checked=true; } } function memoryCookie(Msg) { alert(Msg); expires = new Date() expires.setTime(expires.getTime() + 24*60*60*1000*365) document.cookie = "mytask=" + Msg + ";expires=" + expires.toGMTString() instruct(Msg) } function instruct(Msg) { var str = Msg + "\n\n" } </SCRIPT> <body onload="set();"> <form name="main"> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="玄関掃除" onclick="memoryCookie(this.value)">玄関掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="トイレ掃除" onclick="memoryCookie(this.value)">トイレ掃除<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="草取り" onclick="memoryCookie(this.value)">草取り<BR> <INPUT TYPE="CHECKBOX" NAME="mytask" VALUE="お茶だし" onclick="memoryCookie(this.value)">お茶だし<BR> </form>

  • so_blue
  • ベストアンサー率48% (50/104)
回答No.1

＞クッキーでこういうことできますか？ できます。 ...だけでは、きっと物足りないでしょうから(^^; cookie読み書きは、参考サイトを入れておきます。 もしくは、こことかでしょうか？ http://www.oitaweb.ne.jp/hp/tatsuya/java/cookie.htm 「クッキー javascript」などのキーワードで検索をかけても、結構見つかります。 で、checkboxをjsで書き出す際に、cookieのデータと一致すればcheckedを入れる、という作りにすればよいのではないかな...と（予測です） 確かJSのcookieは、日本語が扱えなかった（化ける）ような話を聞いたことがあります。 ご参考までに。

参考URL：
http://tohoho.wakusei.ne.jp/wwwcook.htm
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • クッキーについて

    いつも参考にさせていただいています。 早速ですが、クッキーのことで質問させてください。 <input type=checkbox name=address value=****@***.ne.jp> <input type=checkbox name=address value=****@***.ne.jp> <input type=checkbox name=address value=****@***.ne.jp> という感じで、HTMLを作成してあります。 ボックスでONにしたもののvalueをクッキーファイル内で、 address:****@***.ne.jp,****@***.ne.jpという感じで、 一つの項目として保存したいです。 現在は、ボックスを複数選択しても、 address:****@***.ne.jpで一つしか保存されません。 参考・ヒントをいただけると大変助かります。 よろしくお願いします。 (初心者なので、できればソースなど具体的な回答が助かります)

    • ベストアンサー
    • Perl
  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 ３つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか？ <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • ＣＧＩでチェックボックスを使う方法

    チェックボックスをＣＧＩ（Ｃ言語）で使用する方法を教えて下さい。 例えば、ＨＴＭＬで <input type="checkbox" name="Check1" value="Sel11" /> チェック１　選択１<br /> <input type="checkbox" name="Check1" value="Sel12" /> チェック１　選択２<br /> <input type="checkbox" name="Check1" value="Sel13" /> チェック１　選択３ <hr /> <input type="checkbox" name="Check2" value="Sel21" checked /> チェック２　選択１<br /> <input type="checkbox" name="Check2" value="Sel22" /> チェック２　選択２<br /> <input type="checkbox" name="Check2" value="Sel23" checked /> チェック２　選択３ というプログラムはＣＧＩ（Ｃ言語）ではどの様に記述すれば良いでしょうか？

    • ベストアンサー
    • CGI
  • クッキーの初歩的質問

    クッキーに下記のような内容を書き込む方法を教えて下さい。上から順にクリックしていったときに、alert(★)の部分を「1,2,3」という結果にしたいのですが。 <SCRIPT language=JavaScript> function memoryCookie(num){ expires = new Date() expires.setTime(expires.getTime() + 24*60*60*1000) document.cookie = "mydata=" + num + ";expires=" + expires.toGMTString() alert(★) } </SCRIPT> <form name="myform"> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="1" onclick="memoryCookie(this.value)">1<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="2" onclick="memoryCookie(this.value)">2<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="3" onclick="memoryCookie(this.value)">3<BR>

  • チェックボックスの値の取得

    初歩的なことがわかりません。 チェックボックスをクリックしたときに、そのチェックボックスの値(Value)を取得する方法をアドバイス下さい。 <SCRIPT language=JavaScript> function test() alert(★)←この辺をうまく書きたい。 </SCRIPT> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="玄関" onclick="test()">玄関<BR> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="トイレ" onclick="test()">トイレ<BR> 「玄関」をクリックすると「玄関です」とalert 「トイレ」をクリックすると「トイレです」とalert 他のチェックボックスにチェックが入っているかは無視。クリックしたチェックボックスのvalueをalert。 下記質問の作業の初めの段階でつまづいています。 (^^; http://www.okweb.ne.jp/kotaeru.php3?q=387758

  • チェックボックスにチェックしたファイルだけをダウンロードできるようにしたい

    サーバーにpdfファイルを１０個保存しています。 ＨＴＭＬページでチェックボックスにチェックを入れたpdfだけを ダウンロードできるようにURL入りの返信メールを自動的に送りたい のですが、やり方がわかりません。 どなたか詳しい人がおられましたら、教えていただけますでしょうか。 一応チェックボックスの過去の回答を見たのですが見当たりません。 （全て見れたわけではないですが） チェックボックス表示までは以下のところまでできたのですが。 よろしくお願いします。 <form> <input type="checkbox" name="グループ1" value="項目1">Apdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目2">Bpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目3">Cpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目4">Dpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目5">Epdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目6">Fpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目7">Gpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目8">Hpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目9">Ipdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目10">Jpdf<br><br><br><br> </form>

  • チェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

    7番のcheckboxをON→1,2,4,5番にチェックもON 7番のcheckboxをOFF→1,2,4,5番にチェックもOFF という風に動作させる記述をご教示ください。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> </script> </head> <body> <form action="" method="post" name="myform"> 去年<br> 1番<input type="checkbox" name="kyonen[]" value="1">1月<br> 2番<input type="checkbox" name="kyonen[]" value="2">2月<br> 3番<input type="checkbox" name="kyonen[]" value="3">3月<br> 今年<br> 4番<input type="checkbox" name="kotosi[]" value="1">1月<br> 5番<input type="checkbox" name="kotosi[]" value="2">2月<br> 6番<input type="checkbox" name="kotosi[]" value="3">3月<br> 7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br> </form> </body> </html>

  • ドロップダウンメニューで選択された内容通りにチェックを入れるJS

    ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>

  • 複数のチェックボックスの一括チェック/解除などのコントロール

    チェックボックスである、1月～12月の値を検索条件としてPHPに渡します。 その際、次のように動作するjavascriptをご教示下さい。よろしくお願い致します。 (1) 通年をチェックしたら、1月～12月もチェック（解除されたら全て解除） (2) 上半期をチェックしたら、1月～6月もチェック（〃） (3) 下半期をチェックしたら、6月～12月もチェック（〃） (4) 通年、上半、下半は、いずれかがチェックされている間、他はdisabledに。 チェックが外れたら、全てアクティブかつ全チェックが解除される状態に。 以上が妥当と思いますが、(4)にの仕様についてはより洗練いただければ誠に幸いです。 <html> <head> <script language="javascript"> </script> </head> <body> <form method="post" action="search.php" id="form1" name="form1"> <input type="checkbox" name="month[]" value="200501">2005年1月<br> <input type="checkbox" name="month[]" value="200502">2005年2月<br> <input type="checkbox" name="month[]" value="200503">2005年3月<br> 　　　　　　　　　：（gooの文字数制限により略） <input type="checkbox" name="month[]" value="200510">2005年10月<br> <input type="checkbox" name="month[]" value="200511">2005年11月<br> <input type="checkbox" name="month[]" value="200512">2005年12月<br> <input type="checkbox" name="all" value="">通年<br> <input type="checkbox" name="1sthalf" value="">上半期のみ<br> <input type="checkbox" name="2ndhalf" value="">下半期のみ<br> <input type="submit" name="exec" value="検索"> </form> </body> </html>

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する