チェックボックスの値を保持したまま受け渡しをしたい

Question

###前提・実現したいこと
いつもお世話になってます。

自作のWordpressテーマに検索フォームを設置しているのですが、チェックボックスの選択した値の受け渡しがうまくいかずここ数日悩んでいます。
検索フォームでチェック項目を選択し、送信後は検索結果ページへ遷移します。
検索結果ページでは前のページで選択したチェックボックスが選択されたままの状態で、フォームの下に検索した結果を表示するようにしています。
前ページで選択したチェックボックスが値がうまく取得できていないのか、もしくは遷移先のPHPの記述が間違っているのか、受け渡しができず「checked="checked"」にならないという状況です。
少々ややこしい仕様のためテンプレートのsearch.php等は使用していません。
$_GETで受け渡す事も考えましたがチェックボックスのvalueが日本語なので$_POSTがやはり適切でしょうか？

他に、いくつか試したことも書いておきます。

初心者のためいくつかおかしい点はありますが、お力添えをいただければ幸いです。

###追記
URLをjQueryで書き換えをしているためAjaxの方法で検証しているのですが、試したことにある

echo "チェックボックス\n";

ここのechoが表示されません…。アラートは出てくるので送れてはいるようです。
参考サイトのコードを変更しているので該当のソースコードに書いておきます。

###該当のソースコード

送信前

<form method="post" action="/search/" id="form">
  <div class="vegetable">
    <h2>野菜</h2>
    <input type="checkbox" name="vege[]" value="トマト">トマト
    <input type="checkbox" name="vege[]" value="ビーマン">ピーマン　
    <input type="checkbox" name="vege[]" value="ジャガイモ">ジャガイモ　
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
    <input type="checkbox" name="fruit[]" value="りんご">りんご
    <input type="checkbox" name="fruit[]" value="オレンジ">オレンジ　
    <input type="checkbox" name="fruit[]" value="バナナ">バナナ　
  </div>

  <button class="submit-btn">送信</button>
</form>

送信後(野菜：ピーマン、フルーツ：バナナを選択した場合)

<form method="post" action="/search/" id="form">
  <div class="vegetable">
    <h2>野菜</h2>
    <input type="checkbox" name="vege[]" value="トマト">トマト
    <input type="checkbox" name="vege[]" value="ビーマン" checked="checked">ピーマン　
    <input type="checkbox" name="vege[]" value="ジャガイモ">ジャガイモ　
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
    <input type="checkbox" name="fruit[]" value="りんご">りんご
    <input type="checkbox" name="fruit[]" value="オレンジ">オレンジ　
    <input type="checkbox" name="fruit[]" value="バナナ" checked="checked">バナナ　
  </div>

  <button class="submit-btn">送信</button>
</form>

<div class="search-result">
  <h1>検索結果</h1>
  <!-- ここからは特に関係なし -->
  <h2>野菜</h2>
  <p>ピーマン</p>
  <h2>フルーツ</h2>
  <p>バナナ</p>
</div>

追記分

【jQuery】
 $("#form").submit(function(){
   var checks=[];
   $("input[type=checkbox]:checked").each(function(){
     checks.push(this.value);
   });
        
   $.ajax({
     type: "POST",
     url: "search",
     data: {
       "checks":checks
     },
     success: function(data){
       if(data != '') {
         alert(data);
       }
     }
   });
   return false;
 });

【PHP】(/search/に記述)
if (isset($_POST['checks'])) {
    echo "チェックボックス\n";
    foreach($_POST['checks'] as $check) {
        echo htmlspecialchars($check) . "が選択されました\n";
    }
}

###試したこと(参考サイトから引用)
jQueryのAjaxを使って複数選択されたチェックボックスの値をPOSTする方法メモ

【jQuery】

$(function(){
    $("#form").submit(function(){
        //選択されたチェックボックスの値を配列に保存
        var checks=[];
        $("[name='check[]']:checked").each(function(){
            checks.push(this.value);
        });
        
        //セレクトボックスの値を変数に保存
        var select = $("#select").val();
        
        $.ajax({
            type: "POST",
            url: "form.php",
            data: {
                "checks":checks,
                "select":select
            },
            success: function(data){
                if(data != '') {
                    alert(data);
                }
            }
        });
        return false;  //submitイベントハンドラにfalseを返し，action処理をキャンセル
    });
});


【PHP】
if (isset($_POST['checks'])) {
    echo "チェックボックス\n";
    foreach($_POST['checks'] as $check) {
        echo htmlspecialchars($check) . "が選択されました\n";
    }
}
if (isset($_POST['select'])) {
    echo "セレクトボックスボックス\n";
    echo htmlspecialchars($_POST['select']) . "が選択されました\n";
}

その他
PHP:フォームからcheckboxの値の取得してチェック状態を保持する方法のメモ
【PHP】チェックボックスの値を受け取る

###追記　URLパラメータ部分

$("form").submit(function() {
    var url = '/search?';

    var value = [];
    $("input:checked").each(function(){
      value.push($(this).val());
    });

    url += "カテゴリ="+value.join(",");
    location.href = encodeURI(url);
    return false;
  });

Comments

[num79kill]

https://api.jquery.com/serialize/でpost-dataをつくれなかったのかしら？

Answer 1

実現したいことの処理を整理すると下記になるかと思います。
1.検索フォームにて、検索したい項目をチェック
2.送信ボタン押下後、Ajaxで検索処理用のphpに「チェックしたデータ」を飛ばす
3.送信ボタン押下による画面遷移をキャンセル
4.Ajaxで返って来たデータを処理して、同一ページに表示

そもそも試されたことを見るに、Ajaxを使用するのであれば画面遷移は不要です。
画面遷移しないのであれば、当然チェックボックスもそのままなので、チェック状態は維持されます。
チェック状態が維持されないというのであれば、恐らくsubmitの画面遷移がキャンセルされずに起きています。上記ソースをコピペして試しましたが、formにid「form」が指定されておらず、
$("#form").submit(function(){〜以降がちゃんと機能していませんでした。

その他、$("[name='check[]']:checked")もセレクタの指定が間違っています。
慣れないうちはブラウザの開発者ツールでJSのデバッグを一行ずつしながら確認していくことをお勧めします。またjQueryで要素を取ってこれるかどうかはconsoleでも確認できるので、処理が上手く行かないと思ったら、要素がきちんと取れているかどうかの確認もしましょう。

上記の場合、野菜であれば次のようにすればチェックされた要素が取れるはずです。
$('.vegetable input[type=checkbox]:checked')
valueだけ取りたい場合は、$('.vegetable input[type=checkbox]:checked').val();
とすれば取れます。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
試したことに関しては引用しているので、実際は[name='check[]']:checkedをHTMLに合わせて検証しています。説明不足ですみません。
整理していただいたおかげでどのように処理をしたらいいのか理解できました。consoleやvar_dumpを使用してじっくり検証してみます。ありがとうございました。

[num79kill]

参考にしているところから単にコピペだけでは解決しませんよ。

セレクタを合わせたり
ポストパラメーターを合わせたりしないといけません

[退会済みユーザー]

num79kill様
試したことに書いたソースコードはサイトの参考にしたコードを引用しているので、実際に検証している時にセレクタやポストパラメータを合わせて検証しています。（該当のソースコードに追記したような記述で）
ここについては説明不足です。失礼いたしました。

Answer 2

ajax使った方がいい場面ですが、使わないとすればこうすればcheck状態は引き継げると思います。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>つぶやき</title>
</head>
<body>

<form method="post" action="/search/">
<div class="vegetable">
  <h2>野菜</h2>
  <input type="checkbox" name="vege[]" value="トマト"
    <?php if(isset($_POST['vege']) && in_array('トマト',$_POST['vege'])): ?>checked="checked"<?php endif; ?>>トマト
  <input type="checkbox" name="vege[]" value="ビーマン"
    <?php if(!$_POST || (isset($_POST['vege']) && in_array('ビーマン',$_POST['vege']))): ?>checked="checked"<?php endif; ?>>ピーマン　
  <input type="checkbox" name="vege[]" value="ジャガイモ"
    <?php if(isset($_POST['vege']) && in_array('ジャガイモ',$_POST['vege'])): ?>checked="checked"<?php endif; ?>>ジャガイモ　
</div>

<div class="fruit">
  <h2>フルーツ</h2>
  <input type="checkbox" name="fruit[]" value="りんご"
    <?php if(isset($_POST['fruit']) && in_array('りんご',$_POST['fruit'])): ?>checked="checked"<?php endif; ?>>りんご
  <input type="checkbox" name="fruit[]" value="オレンジ"
    <?php if(isset($_POST['fruit']) && in_array('オレンジ',$_POST['fruit'])): ?>checked="checked"<?php endif; ?>>オレンジ　
  <input type="checkbox" name="fruit[]" value="バナナ"
    <?php if(!$_POST || (isset($_POST['fruit']) && in_array('バナナ',$_POST['fruit']))): ?>checked="checked"<?php endif; ?>>バナナ　
</div>

<button class="submit-btn">送信</button>
</form>


</body>
</html>

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ソースコードを試したのですが、チェックして送信しても受け渡しがうまくできずチェックされてない状態でした…。
POSTがうまくいってないのかもしれないので、いろいろ試してみようと思います。ありがとうございました。

[num79kill]

actionは自分自身にPOSTする場合は属性自体を削除するか配置場所を指定しないと齟齬がでるきが

[退会済みユーザー]

num79kill様
actionはフォームを設置しているページと検索結果ページが別々なので、actionに検索結果ページのディレクトリ名を書いてます。
このactionについてまだまだ理解できてない事が多いですね…。ご指摘ありがとうございます。

Answer 3

※命題のピーマンでわたす文字が「ビーマン」になっています
この手のタイプミスがデバッグの際に一番わかりにくいので気をつけて下さい

汎用的な考え方をするとこうします

<?PHP
$checked=[
  "vege"=>["トマト"=>"","ピーマン"=>"","ジャガイモ"=>""],
  "fruit"=>["りんご"=>"","オレンジ"=>"","バナナ"=>""],
  ];
$option=["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY];
$vege=filter_input(INPUT_POST,"vege",FILTER_DEFAULT,$option);
foreach($vege as $val){
  $checked["vege"][$val]=" checked=\"checked\"";
}
$veges=htmlspecialchars(implode("、",$vege));
$fruit=filter_input(INPUT_POST,"fruit",FILTER_DEFAULT,$option);
foreach($fruit as $val){
  $checked["fruit"][$val]=" checked=\"checked\"";
}
$fruits=htmlspecialchars(implode("、",$fruit));
print_r($checked);
print <<<eof
<form method="post">
  <div class="vegetable">
    <h2>野菜</h2>
<input type="checkbox" name="vege[]" value="トマト"{$checked["vege"]["トマト"]}>トマト
    <input type="checkbox" name="vege[]" value="ピーマン"{$checked["vege"]["ピーマン"]}>ピーマン　
    <input type="checkbox" name="vege[]" value="ジャガイモ"{$checked["vege"]["ジャガイモ"]}>ジャガイモ　
  </div>

  <div class="fruit">
    <h2>フルーツ</h2>
      <input type="checkbox" name="fruit[]" value="りんご"{$checked["fruit"]["りんご"]}>りんご
    <input type="checkbox" name="fruit[]" value="オレンジ"{$checked["fruit"]["オレンジ"]}>オレンジ　
    <input type="checkbox" name="fruit[]" value="バナナ"{$checked["fruit"]["バナナ"]}>バナナ　
  </div>
  <button class="submit-btn">送信</button>
</form>
<hr>
<div class="search-result">
  <h1>検索結果</h1>
  <h2>野菜</h2>
    <p>{$veges}</p>
  <h2>フルーツ</h2>
    <p>{$fruits}</p>
</div>

eof;
?>

※結果欄を追記しておきました

Comments

[退会済みユーザー]

ご回答ありがとうございます。

記述ミスの指摘と結果欄までソースコード書いていただきありがとうございました。
試してみたらうまくいきました！
それで実際には「野菜」「フルーツ」以外にもチェック項目がいくつかあって下記のコードを
$checked=[
"vege"=>["トマト"=>"","ピーマン"=>"","ジャガイモ"=>""],
"fruit"=>["りんご"=>"","オレンジ"=>"","バナナ"=>""],
];

　↓

$checked=[];

これに変えても大丈夫なのでしょうか？

[yambejp]

各inputのnameにあわせた初期値を設定していますので
項目が増えたらそれに対応する空の配列を用意した方がいいでしょう

[退会済みユーザー]

質問に答えてくださってありがとうございます。

あと、すみません。もう少しお付き合いください。
書いてくださったソースコードはURLのパラメータに影響されるのでしょうか？
jQueryを使って検索結果ページのURLのパラメータを付け加えているのですが、そのパラメータを付け加えるとうまくいかなくなってしまいました…。

$option=["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY];
$vege=filter_input(INPUT_POST,"vege",FILTER_DEFAULT,$option);
ここの部分が関係しているのかと思って調べてみたのですが、いまいち理解ができていなくて…。

[yambejp]

> 検索結果ページのURLのパラメータを付け加えている

の処理がいまいちわかりません。
getでパラメータを渡しているのでしょうか？
今回データ渡はpostで行う前提だと思いますが、そのあたりの住み分けは考慮されていますか？
一度パラメータ云々の部分、ソースを追記で提示されたほうがいいと思います

[退会済みユーザー]

URLパラメータの処理について追記しました。
チェックボックスのvalue値をjQueryの.val()で取得して、URLを書き換えるという処理です。
URLは関係ないと思い、最初から省いてました…。すみません。

[yambejp]

なんとなく言いたいことはわかりました
私の例示はあくまでもページ遷移時に引き継ぐ処理をかいたものなので
ajaxでのデータ取得については考え方をガラッと変えないといけないでしょう。

[退会済みユーザー]

色々とありがとうございました。
yambejp様の方法もあるのだと勉強させてもらったので、また機会があれば参考にさせていただきます。