如何将现有代码的Dropdown选择功能替换为Bullet check选项

1. 替换原有下拉HTML结构 #

你现有代码中输出下拉的print部分绑定了$action_select_list下拉选项集合，直接替换为如下复选框组结构即可：

// 原有变量逻辑保持不变，仅修改print输出部分
print '
<div class="property-type-check-group">
    <h4 class="check-group-title">'.$adv_actions_value.'</h4>
    <div class="check-options-wrapper">
        <label class="check-item">
            <input type="checkbox" name="property_type[]" value="all" '.($adv_actions_value1 == 'all' ? 'checked' : '').'>
            <span class="check-mark"></span>
            全部类型
        </label>
        '.$action_check_list.'
    </div>
</div>
';

注意：你需要先把原生成下拉选项的$action_select_list变量逻辑改造为生成复选框选项的$action_check_list，改造方法为将原<option>标签循环替换为如下结构：

// 原循环生成<option>的逻辑替换为
$action_check_list = '';
foreach ($property_types as $type) {
    $type_slug = mb_strtolower(str_replace(' ', '-', $type->name));
    $checked = (isset($_GET['property_type']) && in_array($type_slug, $_GET['property_type'])) ? 'checked' : '';
    $action_check_list .= '
    <label class="check-item">
        <input type="checkbox" name="property_type[]" value="'.$type_slug.'" '.$checked.'>
        <span class="check-mark"></span>
        '.$type->name.'
    </label>
    ';
}

2. 添加自定义CSS实现圆形勾选样式 #

将以下CSS添加到主题自定义CSS面板或者style.css文件中，即可实现对应勾选效果：

.property-type-check-group {
    margin-bottom: 20px;
}
.check-group-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.check-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    padding-left: 28px;
}
.check-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.check-mark {
    position: absolute;
    left: 0;
    top: 2px;
    height: 18px;
    width: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
}
.check-item input:checked ~ .check-mark {
    background-color: #27ae60;
    border-color: #27ae60;
}
.check-mark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check-item input:checked ~ .check-mark:after {
    display: block;
}

3. 适配筛选提交逻辑 #

原来的下拉是单选参数，现在改成多选用数组传参，需要修改主题对应的筛选接收逻辑：

• 找到主题中处理property_type参数的代码位置，将原来的单值判断改为数组遍历判断
• 如果你用的是WP默认的查询逻辑，只需要将查询参数中的tax_query对应字段的field设为slug，terms直接接收传递的property_type数组即可，无需额外修改
• 若需要实现选中「全部类型」时自动取消其他选项的联动效果，添加如下JS即可：

document.querySelector('input[value="all"]').addEventListener('change', function() {
    const otherChecks = document.querySelectorAll('.check-item input:not([value="all"])');
    if (this.checked) {
        otherChecks.forEach(check => check.checked = false);
    }
});
document.querySelectorAll('.check-item input:not([value="all"])').forEach(check => {
    check.addEventListener('change', function() {
        if (this.checked) {
            document.querySelector('input[value="all"]').checked = false;
        }
    });
});

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