点击按钮按数组ID值设置表格对应复选框为选中状态的实现问题

问题分析 #

原有代码的核心错误点如下：

• 目标ID为字符串格式，没有拆分为数组做逐个匹配，jQuery.inArray的使用逻辑完全错误
• 遍历复选框时没有针对当前遍历元素做判断，错误使用重复ID选择器#checkbox_val操作元素，只会在第一个匹配到的元素上生效
• 用attr()设置复选框选中状态，动态修改表单元素状态应该使用prop()方法
• 存在冗余的全局状态收集逻辑，不需要额外存储所有复选框和ID的状态

修正后的代码 #

直接替换show_value函数即可实现需求：

function show_value() {
  // 将目标ID字符串转换为数组，方便后续匹配
  const targetIds = "1,5".split(',').map(id => id.trim());
  // 遍历所有复选框逐个判断
  $("[name=checkbox_val]").each(function() {
    // 获取当前行对应的ID值
    const currentRowId = $(this).closest("tr").find("[name=id_value]").val().trim();
    // 匹配到目标ID则设置为选中，否则取消选中
    $(this).prop("checked", targetIds.includes(currentRowId));
  });
}

额外优化建议 #

页面中所有复选框和ID输入框都使用了相同的id属性，不符合HTML规范中id必须唯一的要求，建议后续调整为唯一ID，避免其他选择器操作出现异常。

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency