如何在Yii2 CheckboxList中分组添加分隔线？（Bootstrap5）

方法一：手动拆分选项组（最直观可控） #

直接将选项分成两组，分别渲染CheckboxList，组之间插入Bootstrap5风格的分隔线，保证两组的name属性一致，提交时就能获取所有选中值。

示例代码：

<?php
use yii\bootstrap5\Html;

// 定义两组选项
$group1 = [
    1 => '基础功能选项1',
    2 => '基础功能选项2',
];
$group2 = [
    3 => '高级功能选项1',
    4 => '高级功能选项2',
];

// 渲染第一组
echo Html::checkboxList('feature_ids', null, $group1, [
    'itemOptions' => ['class' => 'form-check-input'],
    'labelOptions' => ['class' => 'form-check-label'],
    'item' => function ($index, $label, $name, $checked, $value) {
        return '<div class="form-check mb-2">' 
            . Html::checkbox($name, $checked, ['value' => $value, 'class' => 'form-check-input']) 
            . Html::label($label, $name, ['class' => 'form-check-label']) 
            . '</div>';
    },
]);

// 插入Bootstrap5分隔线（替代hr，样式更统一）
echo '<div class="border-top my-3"></div>';

// 渲染第二组
echo Html::checkboxList('feature_ids', null, $group2, [
    'itemOptions' => ['class' => 'form-check-input'],
    'labelOptions' => ['class' => 'form-check-label'],
    'item' => function ($index, $label, $name, $checked, $value) {
        return '<div class="form-check mb-2">' 
            . Html::checkbox($name, $checked, ['value' => $value, 'class' => 'form-check-input']) 
            . Html::label($label, $name, ['class' => 'form-check-label']) 
            . '</div>';
    },
]);
?>

方法二：自定义Item渲染逻辑（动态分组场景） #

如果选项是动态生成的，可以通过item回调函数判断当前选项是否为第一组的最后一项，然后插入分隔线。

示例代码：

<?php
use yii\bootstrap5\Html;

// 所有选项，假设第一组是value<=2的项
$allOptions = [
    1 => '基础功能选项1',
    2 => '基础功能选项2',
    3 => '高级功能选项1',
    4 => '高级功能选项2',
];

echo Html::checkboxList('feature_ids', null, $allOptions, [
    'item' => function ($index, $label, $name, $checked, $value) {
        // 渲染单个复选框项
        $item = '<div class="form-check mb-2">';
        $item .= Html::checkbox($name, $checked, [
            'value' => $value,
            'class' => 'form-check-input',
        ]);
        $item .= Html::label($label, $name, ['class' => 'form-check-label']);
        $item .= '</div>';

        // 第一组最后一项后插入分隔线
        if ($value == 2) {
            $item .= '<div class="border-top my-3"></div>';
        }

        return $item;
    },
]);
?>

注意事项 #

• 两组CheckboxList的name必须完全一致，否则提交时无法合并选中值。
• 使用Bootstrap5的border-top my-3替代原生<hr>，样式更贴合框架设计，间距更合理。
• 若需要更复杂的分组（比如三组及以上），只需重复上述逻辑，在对应组之间插入分隔线即可。

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