同名数组式Checkbox选中状态不显示及兼容旧jQuery代码问题

核心问题分析 #

你遇到的问题本质是自定义CSS样式未正确同步原生checkbox的初始化checked状态，修改命名后又破坏了原有jQuery选择器的匹配逻辑。不用改plans[]的命名，按以下步骤修复即可：

1. 修复CSS自定义样式的状态同步 #

自定义checkbox通常依赖原生checkbox的:checked伪类切换样式，如果你用display:none隐藏原生框，部分浏览器可能无法正确识别其状态，建议改用视觉隐藏但仍可被CSS识别的方式：

/* 原生checkbox视觉隐藏，保留交互和状态识别 */
input[name='plans[]'] {
    opacity: 0;
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
}
/* 自定义checkbox基础样式 */
.custom-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}
/* 关键：匹配原生checked状态的自定义样式 */
input[name='plans[]']:checked + .custom-checkbox {
    background-color: #007bff;
    border-color: #007bff;
}
input[name='plans[]']:checked + .custom-checkbox::after {
    content: '✓';
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. 用JS强制同步初始化状态（备用方案） #

如果CSS伪类仍不生效，可能是页面渲染顺序导致初始化时状态未被识别，用jQuery在页面加载时手动同步：

$(function() {
    // 初始化时同步所有plans[]的checkbox状态
    $("input[name='plans[]']").each(function() {
        const $customBox = $(this).next('.custom-checkbox');
        $customBox.toggleClass('is-checked', $(this).is(':checked'));
    });

    // 绑定change事件，动态切换样式
    $("input[name='plans[]']").on('change', function() {
        $(this).next('.custom-checkbox').toggleClass('is-checked', $(this).is(':checked'));
    });
});

对应的CSS修改为类选择器：

.custom-checkbox.is-checked {
    background-color: #007bff;
    border-color: #007bff;
}
.custom-checkbox.is-checked::after {
    content: '✓';
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. 保留原有jQuery和PHP逻辑 #

• 不用修改plans[]的命名，PHP端依然可以通过$_POST['plans']获取选中的数组数据；
• 原有jQuery代码$("input[name='plans[]']:checked")完全可以正常匹配，不需要调整。

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