使用jQuery如何在页面完全加载后触发点击指定Checkbox复选框？

根因分析 #

jQuery(document).ready在页面初始DOM树解析完成后就会触发，若目标复选框是通过AJAX、前端框架动态渲染生成的，触发ready时元素还未插入DOM，选择器匹配不到元素，所以点击逻辑不生效。手动在控制台执行时元素已经渲染完成，因此可以正常运行。此外jQuery的ready方法仅绑定在document上时有效，绑定在普通元素上的ready逻辑和document.ready完全一致，不会等待目标元素加载完成，因此第二种写法也无法生效。

可行解决方案 #

方案1：使用MutationObserver监听DOM变化（推荐，性能最优） #

该方案会监听DOM节点的插入变化，一旦目标元素出现立刻执行点击逻辑，无冗余轮询开销，性能损耗极低。

jQuery(document).ready(function() {
  const targetSelector = '.wcpf-input-checkbox[value="hoodie"]';
  // 先检查当前是否已存在目标元素
  if (jQuery(targetSelector).length) {
    jQuery(targetSelector).trigger('click');
    return;
  }
  // 初始化DOM变动监听器
  const observer = new MutationObserver(function() {
    if (jQuery(targetSelector).length) {
      jQuery(targetSelector).trigger('click');
      // 执行完成后停止监听，避免不必要的性能消耗
      observer.disconnect();
    }
  });
  // 监听整个body的子节点变化，包括嵌套子节点
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

方案2：定时器轮询（实现简单，适合快速验证） #

如果场景简单无需复杂监听，可以用定时器轮询检测元素是否存在，找到目标后执行逻辑并清除定时器。

jQuery(document).ready(function() {
  // 每100ms检测一次元素是否存在，间隔可根据需求调整
  const checkTimer = setInterval(function() {
    const $targetCheckbox = jQuery('.wcpf-input-checkbox[value="hoodie"]');
    if ($targetCheckbox.length) {
      $targetCheckbox.trigger('click');
      clearInterval(checkTimer);
    }
  }, 100);
});

兼容优化 #

如果触发点击后出现复选框状态未同步的问题，可以直接修改checked属性后触发change事件，兼容性更强：

$targetCheckbox.prop('checked', true).trigger('change');

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