WordPress自定义分类法Ajax筛选：复选框未添加checked属性问题

我在WordPress中基于自定义分类法实现了Ajax筛选功能，整体功能运行正常，但点击复选框并展示新结果后，该复选框并未被添加上checked属性，不知道遗漏了什么内容？

HTML代码 #

<div class="categories">
    <?php
        $cat_args = get_terms(array(
        'taxonomy' => 'position',
        'orderby' => 'name',
        ));

        $categories = $cat_args;

        foreach($categories as $cat) : ?>
        <label class="hotel-service block mb-2 font-montserrat text-altumTitle text-lg font-medium">
<input type="checkbox" value="yes" class="checkbox" data-category="<?php echo $cat->term_id ?>" href="<?php echo get_category_link($cat->term_id); ?>">&nbsp; <?php echo $cat->name; ?></label>
        <?php endforeach; ?>
    </div>

Ajax调用代码 #

(function($) {
    
    $(document).ready(function(){
    $(document).on('click', '.hotel-service > input', function(e){
        e.preventDefault();
    
        var category = $(this).data('category');
    
        $.ajax({
        url: wpAjax.ajaxUrl,
        // filter here is handler for add_action callback function in ajax-filter.php
        data: { action: 'hotelService', category: category},
        type: 'post',
        success: function(result) {
            $('#response').html(result);
        },
        error: function(result) {
            console.warn(result);
        }
    
        });
    
    });
    });
    
    })(jQuery);

解决方法 #

核心问题是代码没有处理复选框的状态切换逻辑，也未记录已选中的分类，导致点击后复选框的checked属性不会自动更新。按以下步骤修改：

1. 修改JavaScript代码，处理复选框状态并支持多分类筛选 #

(function($) {
    $(document).ready(function(){
        // 存储已选中的分类ID数组
        let selectedCategories = [];

        $(document).on('click', '.hotel-service > input', function(e){
            e.preventDefault();
            const $checkbox = $(this);
            const categoryId = $checkbox.data('category');

            // 手动切换复选框的checked状态
            $checkbox.prop('checked', !$checkbox.prop('checked'));

            // 更新选中分类数组
            if ($checkbox.prop('checked')) {
                selectedCategories.push(categoryId);
            } else {
                // 移除取消选中的分类
                selectedCategories = selectedCategories.filter(id => id !== categoryId);
            }

            $.ajax({
                url: wpAjax.ajaxUrl,
                // 传递选中的分类数组给后端
                data: { 
                    action: 'hotelService', 
                    categories: selectedCategories 
                },
                type: 'post',
                success: function(result) {
                    $('#response').html(result);
                },
                error: function(result) {
                    console.warn(result);
                }
            });
        });
    });
})(jQuery);

2. 修改后端Ajax处理函数，支持多分类筛选 #

在你的ajax-filter.php（或主题函数文件）里，更新hotelService回调函数，接收分类数组并构建查询：

add_action('wp_ajax_hotelService', 'hotelService_callback');
add_action('wp_ajax_nopriv_hotelService', 'hotelService_callback');

function hotelService_callback() {
    // 验证参数合法性
    $selectedCats = isset($_POST['categories']) && is_array($_POST['categories']) ? $_POST['categories'] : [];

    $args = array(
        'post_type' => 'your_post_type', // 替换为你的自定义文章类型
        'tax_query' => array(
            array(
                'taxonomy' => 'position',
                'field'    => 'term_id',
                'terms'    => $selectedCats,
                'operator' => 'IN', // 多分类时用IN表示匹配任意一个，用AND表示同时匹配所有
            ),
        ),
    );

    $query = new WP_Query($args);

    // 输出查询结果
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 这里替换成你的文章内容模板
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<div>' . get_the_excerpt() . '</div>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>没有找到相关内容</p>';
    }

    wp_die();
}

3. 可选：页面刷新后保留复选框选中状态 #

如果需要页面刷新后仍显示之前选中的复选框，可以用Session存储选中的分类，然后在渲染HTML时判断并添加checked属性：

<input type="checkbox" value="yes" class="checkbox" data-category="<?php echo $cat->term_id ?>" 
<?php 
// 从Session获取选中的分类
session_start();
if (isset($_SESSION['selected_categories']) && in_array($cat->term_id, $_SESSION['selected_categories'])) {
    echo 'checked';
}
?>
>

同时在后端Ajax函数里更新Session：

// 在hotelService_callback函数开头添加
session_start();
$_SESSION['selected_categories'] = $selectedCats;

内容的提问来源于stack exchange，提问作者COBNETCKNN