jQuery根据服务端返回值自动勾选checkbox功能失效求解

问题根因 #

• 取值时机错误：你在document.ready外读取checkbox的value，此时DOM还未完成加载，无法正确获取到目标元素的属性值
• input标签缺失value属性：你给出的input代码没有配置value字段，服务端返回的"Y"需要提前渲染到input的value属性中，未配置的情况下checkbox默认value为on，永远不会匹配"Y"的判断条件
• 冗余逻辑：ID属性在页面中是唯一的，不需要调用each()方法遍历匹配结果

修正方案 #

1. 先修改input标签，服务端渲染时写入返回的value值：

<input type="checkbox" name="choice-animals" id="choice" value="Y">

2. 调整JS代码逻辑，把所有DOM操作都放到document.ready回调内执行：

$(document).ready(function () {
  const $targetCheckbox = $('#choice');
  // 可自行保留日志验证value取值
  console.log("----+++" + $targetCheckbox.val());
  // 直接根据value值设置checked状态即可
  $targetCheckbox.prop('checked', $targetCheckbox.val() === "Y");
});

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