如何获取复选框多选值并提交表单以获取匹配搜索结果

我看了你这段代码，发现几个关键问题导致你没法正确获取多选复选框的值，咱们一步步来修正：

一、先修正HTML/PHP代码的核心问题 #

原代码里把复选框和<option>混在一起、复选框的name设置错误、重复的id这些都是坑，修改后的代码如下：

<form action="<?php the_permalink() ?>" class="ajax-search-form leaders-header" id="searchform" method="post" role="search">
    <?php get_template_part( 'blocks/leaderboard/search-form' ); ?>
    <div class="sort">
        <?php if ($departments = get_field_object('field_5da06da87ae0f')) : ?>
            <div class="sort-item">
                <div id="list1" class="dropdown-check-list" tabindex="100">
                    <span class="anchor" style="font-size: small">All Departments</span>
                    <ul id="items" class="items">
                        <?php foreach ($departments['choices'] as $key => $department) : 
                            // 检查当前选项是否在已提交的选中列表里
                            $isChecked = isset($_POST['department']) && in_array($key, $_POST['department']);
                        ?>
                            <li style="font-size: small">
                                <input 
                                    type="checkbox" 
                                    name="department[]"  <!-- 用数组形式的name才能提交多个值 -->
                                    id="department-<?php echo esc_attr($key); ?>"  <!-- 唯一ID -->
                                    value="<?php echo esc_attr($key); ?>"
                                    <?php echo $isChecked ? 'checked' : ''; ?>
                                />
                                <label for="department-<?php echo esc_attr($key); ?>">
                                    <?php echo esc_html($department); ?>
                                </label>
                            </li>
                        <?php endforeach; ?>
                        <li style="font-size: small">
                            <input type="submit" value="Submit" />
                        </li>
                    </ul>
                </div>
            </div>
        <?php endif; ?>
    </div>
</form>

二、后端PHP处理选中值 #

当用户提交表单后，你可以通过$_POST['department']获取所有选中的部门ID数组，然后用这个数组来筛选匹配的搜索结果：

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取选中的部门，默认是空数组，同时做安全过滤
    $selectedDepartments = isset($_POST['department']) ? array_map('sanitize_text_field', $_POST['department']) : [];
    
    // 这里写你的搜索逻辑，比如根据$selectedDepartments筛选数据
    // 示例：如果是WordPress自定义文章类型查询
    $args = [
        'post_type' => 'leader', // 假设你的自定义文章类型是leader
        'meta_query' => [
            [
                'key' => 'department', // 假设存储部门的自定义字段是department
                'value' => $selectedDepartments,
                'compare' => 'IN',
            ]
        ]
    ];
    $leadersQuery = new WP_Query($args);
    
    // 后续处理查询结果，比如循环输出匹配的内容...
}

三、前端JS优化（下拉框交互） #

原代码的onblur事件可能会导致下拉框在点击复选框时意外关闭，改成监听页面点击事件来优化交互：

<script type="text/javascript">
const checkList = document.getElementById('list1');
const anchor = checkList.querySelector('.anchor');
const items = document.getElementById('items');

// 切换下拉框显示/隐藏
anchor.addEventListener('click', function (evt) {
    evt.stopPropagation(); // 阻止事件冒泡，避免触发页面点击事件
    items.classList.toggle('visible');
    items.style.display = items.classList.contains('visible') ? 'block' : 'none';
});

// 点击页面其他地方关闭下拉框
document.addEventListener('click', function(evt) {
    if (!checkList.contains(evt.target)) {
        items.classList.remove('visible');
        items.style.display = 'none';
    }
});

// 保持tab键切换的可用性
items.addEventListener('blur', function(evt) {
    setTimeout(() => {
        if (!checkList.contains(document.activeElement)) {
            items.classList.remove('visible');
            items.style.display = 'none';
        }
    }, 100);
});
</script>

四、测试小技巧 #

你可以先在表单提交后打印出选中的值，确认是否正确获取：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    var_dump($_POST['department']); // 查看获取到的选中值数组
    exit;
}

这样就能正确获取和处理多选复选框的选中值啦！

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