Ajaxによる絞り込みが全て表示される

前提

https://100webdesign.jp/services/wordpress/wp_result/wp_result-22451/
こちらの記事を参考にしております。

実現したいこと

ajaxによる絞り込みを行いたい。

発生している問題・エラーメッセージ

フォーム送信→結果表示までは問題なくできましたが、
その後で絞り込みが上手くいきません。

チェックボックスをチェックすると全ての記事が表示されてしまいます。
また、チェック後にコンソールから確認するとcheckedがついていないようです。

エラーは特に出ておりません。

該当のソースコード

page-jobs.php

PHP
1<?php
2// カスタム投稿タイプ
3$post_type = 'jobs';
4
5$jobs_skills_selected = array();
6$jobs_skill = array();
7$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC'));
8$jobs_skills = $_GET['check_jobs'] ?? null;
9if ($jobs_skills) {
10  foreach ((array)$jobs_skills as $value) {
11    $jobs_skills_selected[] = htmlspecialchars($value);
12    $jobs_skill[] = htmlspecialchars($value);
13  }
14} else {
15  foreach ($jobs_skill_terms as $jobs_skill_term) {
16    $jobs_skill[] = $jobs_skill_term->slug;
17  }
18}
19?>
20<form method="get" action="<?php echo home_url('/'); ?>works/">
21  <div>
22    <div>
23      <?php foreach ($jobs_skill_terms as $jobs_skill_term) {
24        echo '<label><input type="checkbox" name="check_jobs[]" value="' . $jobs_skill_term->slug . '" ';
25        if ($jobs_skills_selected) { //選択した項目はページ遷移後 checked
26          foreach ($jobs_skills_selected as $value) {
27            if ($value == $jobs_skill_term->slug) {
28              echo 'checked';
29            }
30          }
31        }
32        echo '> ' . $jobs_skill_term->name . '</label>';
33      } ?>
34    </div>
35  </div>
36</form>
37 
38<div class="search-results-container">
39  <div id="search-result"></div>
40</div>

ajax-search.php

PHP
1<?php
2$post_type = 'jobs';
3
4$jobs_skills_selected = array();
5$jobs_skill = array();
6$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC'));
7$jobs_skills = $_GET['check_jobs'] ?? null;
8if ($jobs_skills) {
9    foreach ((array)$jobs_skills as $value) {
10        $jobs_skills_selected[] = htmlspecialchars($value);
11        $jobs_skill[] = htmlspecialchars($value);
12    }
13} else {
14    foreach ($jobs_skill_terms as $jobs_skill_term) {
15        $jobs_skill[] = $jobs_skill_term->slug;
16    }
17}
18
19$the_query = new WP_Query(array(
20    'post_status' => 'publish',
21    'post_type' => $post_type,
22    'tax_query' => array(
23        'relation' => 'AND',
24        array(
25            'taxonomy' => 'jobs_cat',
26            'field' => 'slug',
27            'terms' => $jobs_skill,
28        )
29    ),
30    'posts_per_page' => -1,
31    'orderby' => 'date',
32    'order' => 'DESC',
33));
34?>
35<?php if ($the_query->have_posts()) : ?>
36    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
37
38        <article class="jobs_list">
39            <a href="<?php the_permalink(); ?>">
40                <div class="post-thumbnail">
41                    <img src="<?php if (post_custom('jobs_main_image')) : ?><?php the_field('jobs_main_image'); ?><?php else : ?><?php echo get_template_directory_uri(); ?>/library/images/noimage.png<?php endif; ?>" alt="">
42                </div>
43                <h2 class="post-title"><?php the_title(); ?></h2>
44                <p class="post-date">
45                    <?php
46                    if ($terms = get_the_terms($post->ID, 'jobs_cat')) {
47                        foreach ($terms as $term) {
48                            $term_slug = $term->slug;
49                            echo ('<span class="post-category ');
50                            echo esc_html($term_slug);
51                            echo ('">');
52                            echo esc_html($term->name);
53                            echo ('</span>');
54                        }
55                    }
56                    ?>
57                </p>
58            </a>
59        </article>
60    <?php endwhile; ?>
61<?php else : ?>
62    <p>まだ投稿がありません。</p>
63<?php endif; ?>
64<?php wp_reset_postdata(); ?>

functions.php

PHP
1function blank_scripts_and_styles(){
2        if (is_page('jobs')) {
3            //jobs-ajax
4            wp_enqueue_script('jobs-ajax', get_template_directory_uri() . '/library/js/jobs-ajax.js', array(), '', true);
5        }
6}
7add_action('wp_enqueue_scripts', 'blank_scripts_and_styles');
8
9/* フォームの内容を取得してAjaxに送信するプログラムが記述されたJavascriptをheadタグにキュー */
10add_action('wp_enqueue_scripts', function () {
11  $handle = 'jobs-ajax';
12  $file = get_template_directory_uri() . '/library/js/' . $handle . '.js';
13  wp_register_script($handle, $file, array('jquery'), '3.6.0', true);
14 
15  $localize = [
16    'ajax_url' => admin_url('admin-ajax.php'),
17    'action' => 'view_search_results',
18    'nonce' => wp_create_nonce('view_search_results')
19  ];
20  wp_localize_script($handle, 'localize', $localize);
21  wp_enqueue_script($handle);
22});
23 
24
25/* Ajaxから取得したnonceを認証し、認証通過したらテンプレートを出力する */
26function view_search_results()
27{
28  $nonce = $_REQUEST['nonce'];
29  if (wp_verify_nonce($nonce, 'view_search_results')) {
30    get_template_part('template-parts/ajax-search');
31  }
32  die();
33}
34 
35add_action('wp_ajax_view_search_results', 'view_search_results'); //第一引数は wp_ajax_{ファンクション名} にする
36add_action('wp_ajax_nopriv_view_search_results', 'view_search_results'); //第一引数は wp_ajax_nopriv_{ファンクション名} にする

JS
1$("input[name='check_jobs[]']").change(function () {
2 
3  let check_jobs = [];
4  $("[name='check_jobs[]']:checked").each(function () {
5    check_jobs.push(this.value);
6  });
7  $.ajax({
8    type: 'GET',
9    url: localize.ajax_url,
10    data: {
11      'action': 'view_search_results',
12      'jobs_skill': check_jobs,
13      'nonce': localize.nonce
14    },
15    success: function (response) {
16      $('#search-result').html(response);
17    }
18  })
19 
20  return false;
21});