JavaScript实现：Checkbox值与数据库数据匹配时自动勾选

嘿，别担心，我来帮你搞定这个问题😉 你的思路是对的，但当前的JavaScript代码有几个小问题需要调整，我们一步步来修正：

问题分析 #

你现在的代码$('.loincode').attr("checked",data.loin== value);存在两个问题：

1. 变量value在这里没有定义，JS无法识别它指向的内容
2. 直接给所有.loincode复选框批量设置checked状态，没法逐个匹配每个复选框的value和数据库返回的值

修正后的代码方案 #

我们需要遍历每个复选框，对比它的value和后端返回的data.loin值，来决定是否勾选。另外，操作复选框的选中状态推荐用prop()而不是attr()，因为prop()是操作DOM元素的状态属性，比修改HTML属性的attr()更准确可靠。

修改你的Ajax成功回调函数：

$('.tampilModalUbahPts').on('click',function () {
    var id = $(this).data('id');
    $('.modal-body form').attr('action','/pts/'+id+'/update');
    $.ajax({
        url: '/ptspt/getubah',
        data: {id : id},
        method:'get',
        dataType : 'json',
        success: function (data) {
            $('#lbs').val(data.lbs);
            
            // 1. 先清空所有复选框的选中状态，避免残留之前的选择
            $('.loincode').prop('checked', false);
            
            // 2. 处理后端返回的值：如果是单个值就转成数组，统一处理逻辑
            const targetCodes = Array.isArray(data.loin) ? data.loin : [data.loin];
            
            // 3. 遍历每个复选框，匹配就勾选
            $('.loincode').each(function() {
                const currentValue = $(this).val();
                if (targetCodes.includes(currentValue)) {
                    $(this).prop('checked', true);
                }
            });
        }
    });
});

额外说明 #

• 如果后端返回的data.loin是多个选中的sap_code组成的数组（比如用户之前选了多个复选框），这个代码也能完美适配；如果是单个值，代码会自动转成数组，逻辑统一。
• 用prop('checked', true/false)来控制选中状态，比attr()更可靠，因为复选框的选中状态是DOM元素的动态属性，attr()只能修改初始的HTML属性，无法同步后续的状态变化。

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