ベストアンサー

checkboxをクリックしてリロードした際、クリックしたcheckboxのvalueの値を保持したい。

2008/09/27 00:12

checkboxをクリックした後、リロードをしてクリックされたcheckboxのvalueの値を表示したいと思っております。ただ、下記のソースでは動作しませんでした。リロード時のvalueの値の引渡し方法に問題があるのだろうと思いますが、どう記述すればよいか分かりませんでした。その為、どのような記述を行えばよいかアドバイスをいただければと思います。【ソース】 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> function load() { window.alert(value); } </script> <title>title</title> </head> <body onload="load();"> <p>valueは1<input type="checkbox" name="checkbox1" value="1" onclick="location.reload()" onkeypress="location.reload()" /></p> <p>valueは2<input type="checkbox" name="checkbox2" value="2" onclick="location.reload()" onkeypress="location.reload()" /></p> <p>valueは3<input type="checkbox" name="checkbox3" value="3" onclick="location.reload()" onkeypress="location.reload()" /></p> </body> </html> 以上、よろしくお願いします。

iroha_168
お礼率89% (204/228)

JavaScript
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/09/27 14:28 回答No.4

ちょっと手を抜いているけど、こんな感じでいけるのでは？ <script> window.onload=load; function load() { var f=document.getElementById("f0"); var v=""; var s=location.search.substr(1).split("&") for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ f[i].onclick=function(){ this.form.submit(); } f[i].onkeypress=function(){ this.form.submit(); } for(var j in s){ if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true; } if(f[i].checked) v+=(v==""?"":",")+f[i].value; } } alert(v) } </script> <form id="f0"> <p>valueは1<input type="checkbox" name="checkbox1" value="1" /></p> <p>valueは2<input type="checkbox" name="checkbox2" value="2" /></p> <p>valueは3<input type="checkbox" name="checkbox3" value="3" /></p> </form>

質問者

お礼 2008/09/27 23:40

ありがとうございます。動作の方確認いたしました。私が行いたかった動作について一通り実現できているようでした。これからソースを読んでみて、どういう動作をしているか確かめてみようと思います。どうもありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

noname#84373

2008/09/27 09:10 回答No.3

<html> <body> <p>valueは1<input type="checkbox" name="checkbox1" value="1" onclick="hoge()" onkeypress="hoge()" /></p> <p>valueは2<input type="checkbox" name="checkbox2" value="2" onclick="hoge()" onkeypress="hoge()" /></p> <p>valueは3<input type="checkbox" name="checkbox3" value="3" onclick="hoge()" onkeypress="hoge()" /></p> </body> <script> window.onload=function(){ document.getElementsByName('checkbox1')[0].checked=loadCookie('checkbox1')-0; document.getElementsByName('checkbox2')[0].checked=loadCookie('checkbox2')-0; document.getElementsByName('checkbox3')[0].checked=loadCookie('checkbox3')-0; } function hoge(){ saveCookie( 'checkbox1',document.getElementsByName('checkbox1')[0].checked*1,1); saveCookie( 'checkbox2',document.getElementsByName('checkbox2')[0].checked*1,1); saveCookie( 'checkbox3',document.getElementsByName('checkbox3')[0].checked*1,1); location.reload(); } function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = unescape(c[1]);break; }} return r;} </script>

質問者

お礼 2008/09/27 23:36

ありがとうございます。動作の方確認いたしました。チェックボックスの値が表示されませんでしたが、それ以外は意図した動作をしているようでした。どうもありがとうございました。

ログインすると、全ての回答が全文表示されます。

asapinya
ベストアンサー率36% (40/109)

2008/09/27 01:30 回答No.2

リロードするとチェックの値はクリアされてしまうので、「アドレス?キー=値」のGETでリロード時に値を送っています。ちなみに、ファイル名を「hatena.html」としています。（14行目）こんな感じでいかがでしょう？ ----------------------------------------- <script type="text/javascript"></script> <title>title</title> </head> <body onload="chkval();"> <p>valueは1<input type="checkbox" name="checkbox1" value="1" onclick="rep('box1','1')" onkeypress="rep('box1','1')" /></p> <p>valueは2<input type="checkbox" name="checkbox2" value="2" onclick="rep('box2','2')" onkeypress="rep('box2','2')" /></p> <p>valueは3<input type="checkbox" name="checkbox3" value="3" onclick="rep('box3','3')" onkeypress="rep('box3','3')" /></p> </body> -----------------------------------------

質問者