如何用AJAX将数据库取出的逗号分隔值填充到同class的多个复选框

核心原因 #

jQuery的val()方法设置多复选框选中状态时，仅支持数组类型的入参，你直接传入逗号分隔的字符串无法被正确解析。

可直接运行的修复代码 #

$(document).ready(function(){
  var fruits = "banana,apple,orange";
  // 拆分字符串为数组，自动处理值之间可能存在的空格
  const fruitArray = fruits.split(',').map(item => item.trim());
  $(".check").val(fruitArray);
});

可选遍历实现写法 #

如果需要更灵活的控制逻辑（比如匹配时忽略大小写等），可以用遍历判断的方式实现：

$(document).ready(function(){
  var fruits = "banana,apple,orange";
  const fruitArray = fruits.split(',').map(item => item.trim().toLowerCase());
  $(".check").each(function() {
    const currentVal = $(this).val().toLowerCase();
    $(this).prop('checked', fruitArray.includes(currentVal));
  });
});

额外注意 #

你提供的HTML结构存在笔误：<div class"fruits"> 缺少属性赋值的等号，建议修正为 <div class="fruits"> 避免后续样式或选择器匹配异常。

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