cookieで選択したラジオボタンを保存したい

ラジオボタンを選択し「設定」リンクを押すと、リンクを押す前に選択したラジオボタンが選択されている状態にしたいです。ご教授お願いします。

html
1<!DOCTYPE html>
2<html>
3   <head>
4      <meta charset="utf-8">
5      <title></title>
6   </head>
7   <body>
8      <input type="radio" value="" name="radio" checked><label>a</label>
9      <input type="radio" value="" name="radio"><label>b</label>
10      <input type="radio" value="" name="radio"><label>c</label><br>
11
12      <a href="#">設定</a>
13   </body>
14</html>
15

以下が試したコードです。

html
1<?php
2	setcookie("a","checked",time()+1000);
3	setcookie("b","checked",time()+1000);
4	setcookie("c","checked",time()+1000);
5?>
6<!DOCTYPE html>
7<html>
8   <head>
9      <meta charset="utf-8">
10      <title></title>
11   </head>
12   <body>
13      <input type="radio" value="" name="radio" checked><label>a</label>
14      <input type="radio" value="" name="radio" <?=$_COOKIE["b"] ?>><label>b</label>
15      <input type="radio" value="" name="radio" <?=$_COOKIE["c"] ?>><label>c</label><br>
16
17      <a href="#">設定</a>
18   </body>
19</html>
20

デフォルトではaが選択され、その後bを選択し「設定」を押すと再度このページが表示されbが選択されている、というようにしたいです。

kei344

2019/10/24 01:57

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

yambejp

2019/10/24 01:59

> リンクを押す前に選択したラジオボタンが選択・デフォルト値にしたいのでしょうか？・クッキーで保存した値にしたいのでしょうか？　（クッキーへの保存はどのタイミングでするのでしょうか？）

nyaaa6

2019/10/24 02:07

kei344さんご指摘ありがとうございます。追記しました。何がどのようにわからないのか →「設定する」リンクを押すごとにページが更新され、選択されているラジオボタンを変化させたいのですが、どのようにすれば、選択肢毎に「checked」をinputタグに渡せるのかが、わかりません。

nyaaa6

2019/10/24 02:08

yambejpさん設定するを押したタイミングでクッキーへ保存をしたいです。デフォルトの選択肢はaのみで、その後bを選び設定を押すと、bのみが選択されている状態にしたいです。

yambejp

2019/10/24 02:16

追記いただいたソースを見る限り同じnameのラジオボタンにすべてcheckedをつける処理が書いてあるように見えますそれをするならチェックボックスでやるべきでは？単純にデフォルトがAで設定を押すたびにクッキーに保存され次回からそれがデフォルトになる処理ということですかね？クッキーの設定はjs、ラジオボタンのデフォルト選択はphpでよいですか？

nyaaa6

2019/10/24 02:21

>同じnameのラジオボタンにすべてcheckedをつける処理が書いてあるように見えますそれをするならチェックボックスでやるべきでは？一つずつしか選択できないようにする為にラジオボタンにしていました。 >単純にデフォルトがAで設定を押すたびにクッキーに保存され次回からそれがデフォルトになる処理その通りです。 >クッキーの設定はjs、ラジオボタンのデフォルト選択はphpでよいですか？はい。

行動規範の内容に同意します

回答1件

ベストアンサー

jsのクッキー処理がちょっと雑ですがこう

PHP
1<?php
2$checked=["a"=>"","b"=>"","c"=>""];
3$checked[isset($_COOKIE["r"])?$_COOKIE["r"]:"a"]=" checked";
4?>
5<script>
6window.addEventListener('DOMContentLoaded', ()=>{
7  document.querySelector('[name=r][checked]').checked=true;
8  document.querySelector('#set').addEventListener('click',e=>{
9    e.preventDefault();
10    var r=document.querySelector('[name=r]:checked');
11    document.cookie="r="+r.value;
12  });
13  document.querySelector('#reload').addEventListener('click',e=>{
14    e.preventDefault();
15    location.reload();
16  });
17});
18</script>
19<label><input type="radio" value="a" name="r"<?=$checked["a"];?>>a</label>
20<label><input type="radio" value="b" name="r"<?=$checked["b"];?>>b</label>
21<label><input type="radio" value="c" name="r"<?=$checked["c"];?>>c</label><br>
22<a href="#" id="set">設定</a>
23<a href="#" id="reload">リロード</a>