新生活を充実させるための「こだわり」を取材!!

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.dt …
<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>

以上、よろしくお願いします。

教えて!goo グレード

A 回答 (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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2008/09/27 23:40

<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>
    • good
    • 1
この回答へのお礼

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

お礼日時:2008/09/27 23:36

リロードするとチェックの値はクリアされてしまうので、


「アドレス?キー=値」のGETでリロード時に値を送っています。
ちなみに、ファイル名を「hatena.html」としています。(14行目)
こんな感じでいかがでしょう?
-----------------------------------------
<script type="text/javascript"><!--
function chkval() {
var op = window.location.search.substring(1);
if (op=="")return false;
var posi = op.indexOf('=');
if (posi > 0) {
var key = op.substring(0,posi);
var val = op.substring(posi+1);
}
alert(key+" = " +val);
}

function rep(m,n){
location.replace("./hatena.html"+"?"+m+"="+n);
}

//--></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>
-----------------------------------------
    • good
    • 0
この回答へのお礼

ありがとうございます。
動作の方確認いたしました。
下記の点が気になりましたが、質問であげさせていただいた事については正常に動作しているようでした。
・checkboxのoff/onの表示が残らない。
・複数のcheckboxの選択に対応していない。
どうもありがとうございました。

お礼日時:2008/09/27 23:29

function load()


  var CK1, CK2, CK3, ss;
  CK1 = document.GetElementsByName("checkbox1")[0];
  CK2 = document.GetElementsByName("checkbox2")[0];
  CK3 = document.GetElementsByName("checkbox3")[0];
  ss = "";
  if ( CK1 != undefined && CK1.checked ) {
    ss += CK1.value + " ";
  }
  if ( CK2 != undefined && CK2.checked ) {
    ss += CK2.value + " ";
  }
  if ( CK3 != undefined && CK3.checked ) {
    ss += CK3.value + " ";
  }
  if ( ss != "" ) {
    window.alert( ss );
  }
}
といった具合に変更して
INPUTタグの onclick、onkeypress を "=load();" にして見ましょう

たぶんこのよううな事がしたいのだろうとおもいます … 見当違いならスルーで
    • good
    • 0
この回答へのお礼

ありがとうございます。
動作の方確認いたしました。
checkboxの値は取得できていましたが、リロードはしていないようでした。
ちょっとやりたいこととは違いましたが、勉強になりました。
どうもありがとうございました。

お礼日時:2008/09/27 22:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

教えて!goo グレード

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング