取消复选框时输入框对应值未移除的问题修复请求

现有相关代码 #

值变更下拉选择框 #

<select id="T" name="unittype" class="form-control" style="width: 100%;" required>
    <option value="" hidden>Select one ...</option>
    <option value="Pair">Pair</option>
    <option value="Solo">Solo</option>
    <option value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</option>
    <option value="Solo to Pair Unit">Solo to Pair Unit</option>
</select>

输入框值同步逻辑（绑定复选框change事件） #

$('input:checkbox').change((e) => {
    if ($(e.currentTarget).is(':checked')) {
        var curVal = $('#name').val();
        if (curVal) {
            $('#name').val(curVal + ', ' + e.currentTarget.value);
        } else {
            $('#name').val(e.currentTarget.value);
        }
    } else {
        var curVal = $('#name').val().split(',');
        var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value);
        $('#name').val(filteredVal.join(','));
    }
});

复选框选中数量限制逻辑 #

const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
if (checkboxes.length >= 2) {
    checkboxes[1].checked = false;
}

问题详情 #

当前设置最多只能选中1个复选框，但当第二个复选框被选中后自动取消勾选时，对应的值仍保留在输入框#name中，无法自动移除。

已尝试：在线搜索适配多种方案，均未解决问题。

• 预期结果：取消勾选（包括自动取消）的复选框对应值能从输入框中移除
• 实际结果：第二个被自动取消的复选框对应值仍留在输入框内

解决方案 #

问题根源是：限制复选框数量的代码仅修改了复选框的checked状态，但未触发change事件，导致输入框的移除值逻辑未执行。只需在取消复选框选中时手动触发change事件即可。

修改后的复选框数量限制代码（整合到事件监听中）：

// 为所有复选框绑定change事件，统一处理选中限制和事件触发
document.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
        if (checkedBoxes.length >= 2) {
            const targetBox = checkedBoxes[1];
            targetBox.checked = false;
            /* 手动触发change事件，让输入框的移除逻辑执行 */
            // 若使用jQuery
            $(targetBox).trigger('change');
            // 若用原生JS，替换上面一行：
            // targetBox.dispatchEvent(new Event('change'));
        }
    });
});

补充优化方案（避免字符串分割隐患） #

如果输入框的值本身可能包含逗号，字符串分割逻辑会出错，建议改用数组维护选中值：

// 初始化选中值数组
let selectedValues = [];

$('input:checkbox').change((e) => {
    const val = e.currentTarget.value;
    if ($(e.currentTarget).is(':checked')) {
        // 添加值（避免重复）
        if (!selectedValues.includes(val)) {
            selectedValues.push(val);
        }
    } else {
        // 移除值
        selectedValues = selectedValues.filter(item => item !== val);
    }
    // 更新输入框
    $('#name').val(selectedValues.join(', '));
});

// 复选框数量限制逻辑
document.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
        if (checkedBoxes.length >= 2) {
            const targetBox = checkedBoxes[1];
            targetBox.checked = false;
            $(targetBox).trigger('change');
        }
    });
});

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