如何用jQuery在页面加载时自动勾选data-size值最小的复选框？

解决方案 #

可以实现，以下是可直接使用的代码：

// 等待页面DOM完全加载后执行
$(document).ready(function() {
  let minSize = Infinity;
  let minCheckbox = null;

  // 遍历所有目标复选框
  $('input[name="encs[]"][type="checkbox"]').each(function() {
    // 将data-size转为数值避免字符串比较的错误
    const size = Number($(this).data('size'));
    if (size < minSize) {
      minSize = size;
      minCheckbox = $(this);
    }
  });

  // 匹配到目标复选框时自动勾选
  if (minCheckbox) {
    minCheckbox.prop('checked', true);
  }
});

注意事项 #

• 运行代码前需确保页面已正确引入jQuery库
• 如果复选框是通过异步接口动态渲染的，需要将上述代码放到接口请求完成、复选框已插入DOM后的回调逻辑中，否则会找不到对应元素
• 代码内置了空值兼容逻辑，无匹配的复选框时不会抛出JS异常

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