チェックボックスのチェック保持

質問

チェックボックスでチェックされた項目で検索を行いたいです。
検索後は、チェックを保持させておきたくjavascriptとcookieを使用すればできるのかなと思うのですが、うまくいきません。
できればチェックボックスのnameは別々にしたいのですが、どなたかご教授いただけるとうれしいです。よろしくお願いします。

回答No.1

yambejp

おそらくcookieについても理解が浅いのでしょうね

本件についてはチェックボックスのnameがそのページでユニーク
であるという条件が必要です。
あとはこんなかんじ

<script>
window.onload=function(){
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="checkbox"){
tags[i].checked=getCookie(tags[i].name);
}
}
}
try{
document.addEventListener('click',function(e){clickFunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickFunc(e)});
}
function clickFunc(e){
var t= (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="checkbox"){
if(t.checked) setCookie(t.name,1);
else delCookie(t.name);
}
}
function setCookie(key,val){
var tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
document.cookie = tmp;
};
function getCookie(key){
var tmp = document.cookie+";";
var tmp1 = tmp.indexOf(key,0);
var ret=false;
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
var start = tmp.indexOf("=",0);
var end = tmp.indexOf(";",start);
ret=unescape(tmp.substring(start+1,end));
}
return ret;
};
function delCookie(key){
var expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
var tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};
</script>
<input type="checkbox" name="hoge">hoge
<input type="checkbox" name="fuga">fuga
<input type="checkbox" name="piyo">piyo

お礼

yambejpさん、回答ありがとうございます。
教えて頂いたコードでできました。初心者のためまだ中身を理解できていませんが、頑張って見ていきたいと思います。
本当にありがとうございました。