jQuery实现复选框勾选存值、取消勾选无法移除值的问题咨询

数据老陈

2026-10-6

问题根因

你将#features输入框的赋值逻辑写在了选中复选框的遍历循环内，当用户取消勾选后如果没有符合条件的选中项，遍历逻辑不会触发，输入框内容就不会更新
你给复选框重复绑定了两次change事件，完全可以合并逻辑减少不必要的性能消耗

修复后的代码

替换你原来的两段JS逻辑为以下代码即可：

$(".form-check-input").change(function() {
    var abc = [];
    var total = 0;
    // 收集所有选中的功能名称（只取列表选项，排除全选框）
    $('li input.form-check-input:checked').each(function() {
        var $row = $(this).closest('li');
        abc.push($row.find('h3').text());
    });
    // 计算所有选中复选框的总价（包含全选框）
    $('input.form-check-input:checked').each(function() {
        var val = parseInt($(this).val());
        total += isNaN(val) ? 0 : val;
    });
    // 赋值逻辑放在遍历外，无论有没有选中项都会执行更新
    $("#features").val(abc.join(','));
    $("#total").val("$" + total.toFixed(2));
});