おすすめのモーニング・朝食メニューを教えて！

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

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：4件

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>

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

ちょっと手を抜いているけど、こんな感じでいけるのでは？



<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

No.3

  • 回答者： _pipi_
  • 回答日時：

<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

No.2

  • 回答者： asapinya
  • 回答日時：

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


「アドレス?キー=値」の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

No.1

  • 回答者： redfox63
  • 回答日時：

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質問する（無料）

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

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

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

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報