cookieがあったらチェックボックスにチェックする(PHP)

Question

あのすみません、**「cookieがあったらチェックボックスにチェックする」**って、PHPだとどうやるんですか？

cookieはcheck_colorというキーで、入る値はredとかgreenとかred%2greenとかです。
もしredが入ってたらname="check_red"にチェックしたいというイメージです。

<div class="labels">
    <label id="check_red">
        <input name="check_red" type="checkbox" value="red">
        <span>red</span>
    </label>    
    <label id="check_green">
        <input name="check_red" type="checkbox" value="green">
        <span>green</span>
    </label>
</div>

自分が考えたのは下記のように、**「cookieがあったらチェックボックス自体をチェックつきで出力する」**なんですけど、これじゃおかしいですよね？

<div class="labels">
	<label id="check_red">
		<?php cookie_check_red(); //cookieがあったらチェックボックス自体をチェックつきで出力する?>
		<span>red</span>
	</label>	
	<label id="check_green">
		<?php cookie_check_green(); //cookieがあったらチェックボックス自体をチェックつきで出力する?>
		<span>green</span>
	</label>
</div>

<?php
function cookie_check_red(){
	if (isset($_COOKIE["check_color"])){
		if ( 1 === preg_match( '/red/', $_COOKIE["check_red"] ) ) {
			echo '<input name="check_red" type="checkbox" value="red" checked="">';
		}else{
			echo '<input name="check_red" type="checkbox" value="">';
		}
	}else{
		echo '<input name="check_red" type="checkbox" value="">';
	}	
}
function cookie_check_green(){
	if (isset($_COOKIE["check_color"])){
		if ( 1 === preg_match( '/green/', $_COOKIE["check_green"] ) ) {
			echo '<input name="check_green" type="checkbox" value="green" checked="">';
		}else{
			echo '<input name="check_green" type="checkbox" value="">';
		}
	}else{
		echo '<input name="check_green" type="checkbox" value="">';
	}	
}
?>

Answer 1

「red%2green」は「red%20green」ですよね？

こんな感じでどうでしょう？
（js側でセットする処理を書いてあります）

<?PHP
$cookie=filter_var_array($_COOKIE,["check_color"=>FILTER_DEFAULT]);
print_r($cookie);
$checked=[
  "red"=>preg_match("/(^| )red(?= |$)/",$cookie["check_color"])?" checked":"",
  "green"=>preg_match("/(^| )green(?= |$)/",$cookie["check_color"])?" checked":"",
];
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
  //$.removeCookie('check_color');
  console.log(document.cookie);
  $('#btn1').on('click',function(){
    location.href=location.href;
  });
  $('#btn2').on('click',function(){
    setcolor('red');
  });
  $('#btn3').on('click',function(){
    delcolor('red');
  });
  $('#btn4').on('click',function(){
    setcolor('green');
  });
  $('#btn5').on('click',function(){
    delcolor('green');
  });
});
function setcolor(c){
  var color=$.cookie('check_color')||'';
  var reg=new RegExp("(^| )"+c+"(?= |$)");
  if(!color.match(reg)){
    if(color!=='') color+=' ';
    color+=c;
    $.cookie('check_color',color);
  }
}
function delcolor(c){
  var color=$.cookie('check_color')||'';
  var reg=new RegExp("(^| )"+c+"(?= |$)");
  color=color.replace(reg,'');
  color=color.replace(/^ | $/,'');
  if(color==""){
    $.removeCookie('check_color');
  }else{
    $.cookie('check_color',color);
  }
}
</script>
<div class="labels">
    <label id="check_red">
        <input name="check_red" type="checkbox" value="red"<?=$checked["red"];?>>
        <span>red</span>
    </label>    
    <label id="check_green">
        <input name="check_red" type="checkbox" value="green"<?=$checked["green"];?>>
        <span>green</span>
    </label>
</div>

<input type="button" id="btn1" value="reload">
<input type="button" id="btn2"value="set red">
<input type="button" id="btn3" value="del red">
<input type="button" id="btn4" value="set green">
<input type="button" id="btn5" value="del green">

調整

<?PHP
$cookie=filter_var_array($_COOKIE,["check_color"=>FILTER_DEFAULT]);
$checked=["red"=>"","green"=>""];
$val=["red"=>"","green"=>""];
print_r($cookie);
if(preg_match("/(^| )red(?= |$)/",$cookie["check_color"])){
  $checked["red"]=" checked";
  $val["red"]="red";
};
if(preg_match("/(^| )green(?= |$)/",$cookie["check_color"])){
  $checked["green"]=" checked";
  $val["green"]="green";
};

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
  //$.removeCookie('check_color');
  console.log(document.cookie);
  $('#btn1').on('click',function(){
    location.href=location.href;
  });
  $('#btn2').on('click',function(){
    setcolor('red');
  });
  $('#btn3').on('click',function(){
    delcolor('red');
  });
  $('#btn4').on('click',function(){
    setcolor('green');
  });
  $('#btn5').on('click',function(){
    delcolor('green');
  });
});
function setcolor(c){
  var color=$.cookie('check_color')||'';
  var reg=new RegExp("(^| )"+c+"(?= |$)");
  if(!color.match(reg)){
    if(color!=='') color+=' ';
    color+=c;
    $.cookie('check_color',color);
  }
}
function delcolor(c){
  var color=$.cookie('check_color')||'';
  var reg=new RegExp("(^| )"+c+"(?= |$)");
  color=color.replace(reg,'');
  color=color.replace(/^ | $/,'');
  if(color==""){
    $.removeCookie('check_color');
  }else{
    $.cookie('check_color',color);
  }
}
</script>
<div class="labels">
    <label id="check_red">
        <input name="check_red" type="checkbox" value="<?=$val["red"];?>"<?=$checked["red"];?>>
        <span>red</span>
    </label>    
    <label id="check_green">
        <input name="check_red" type="checkbox" value="<?=$val["green"];?>"<?=$checked["green"];?>>
        <span>green</span>
    </label>
</div>

<input type="button" id="btn1" value="reload">
<input type="button" id="btn2"value="set red">
<input type="button" id="btn3" value="del red">
<input type="button" id="btn4" value="set green">
<input type="button" id="btn5" value="del green">

Comments

[ikkouenosenpai]

ありがとうございます。いろんな機能をつけてくれてめちゃうれしいんですが、実は事情があって（ajaxでそのvalueを拾っているため）、greenのcookieがないときは「greenにチェックをはずす」だけでなく、「greenのvalueを空」にしたかったんです。そのために質問コードのifで「greenが空ならvalue=""」と書いてました。書いてるだけで説明がなくてすみませんでした。

[yambejp]

総じてcheck_colorの値をみてcheck_redとcheck_greenのvalueを変えるのでしょうか？

[ikkouenosenpai]

そうです。でvalueをajaxで拾って別のことに使いたかったんです。

チェックを付けたり外したり
→チェックした、という見た目を変える。

valueを入れたり空にしたり
→チェックしたことでvalueを拾ってajaxで表示内容を変える。

みたいな感じです。

[yambejp]

調整版をあげました

[ikkouenosenpai]

圧倒的…っっ！圧倒的感謝…！！どうもありがとうございます。

Answer 2

全体的に違和感があります。

<?php
// $_COOKIE["select_green"] = true;
$checked = isset($_COOKIE["select_green"])? "checked" : "";
echo '<input name="radio1" type="checkbox" value="red" ' . $checked . '>';

radio でもだいたい同じ

Comments

[ikkouenosenpai]

すいません、cookieのキーは「２つとも」check_colorです。

Answer 3

おかしくはないですが、cookieが設定されていなかったら、value=""にするのはおかしいですね。

Comments

[ikkouenosenpai]

はい、cookieがなかったらvalueを空にしたかったんです。

[kasa0]

valueはチェックボックスがチェックされたときに返す値なので、それを空にしてしまうとチェックされても"red"や"green"が返らなくなってしまいます。

あくまでもチェックされたかどうかは、"checked"で設定します。

[ikkouenosenpai]

「var test = $('.box input').val()」とするとき、もし「.box input」にチェックが入ってなくても、「test」には「.box input」のvalueが入っちゃいません？で、入っちゃうと困るんで、空にしておきたい。という考えなんですけど、おかしいですかこれ？

[kasa0]

チェックボックスの場合は、「var test = $('.box input:checked').val()」とするのが普通ですね。

[ikkouenosenpai]

うおすげー！知んなかったです！そーするとチェックされたときだけvalue拾えるってことですよね？ありがとうございます！！

[kasa0]

はい、便利ですね。