如何让jQuery函数在满足条件或触发事件时执行？

核心思路是覆盖两种触发场景：页面初始化时检查元素状态是否符合要求，以及元素状态发生变化时再次校验条件，符合则执行目标函数。

示例1：复选框勾选或变为勾选时执行函数 #

针对复选框，我们需要在页面加载时判断是否已勾选，同时监听change事件捕捉勾选状态的切换：

// 定义要执行的业务函数
function handleCheckboxTask() {
  // 替换为你的实际操作，比如提交表单、显示内容等
  console.log("复选框已勾选，执行对应操作");
}

$(document).ready(function() {
  // 替换为你页面中复选框的实际选择器（ID/类名等）
  const $targetCheckbox = $('#my-checkbox');

  // 页面初始化时：如果复选框已勾选，直接执行函数
  if ($targetCheckbox.is(':checked')) {
    handleCheckboxTask();
  }

  // 监听复选框状态变化：变为勾选状态时执行函数
  $targetCheckbox.on('change', function() {
    if ($(this).is(':checked')) {
      handleCheckboxTask();
    }
  });
});

示例2：下拉菜单选中X/x或变为X/x时执行函数 #

针对下拉菜单，我们需要校验选中值（忽略大小写），同样覆盖初始化和状态变化两个场景：

// 定义要执行的业务函数
function handleSelectTask() {
  // 替换为你的实际操作，比如加载数据、切换视图等
  console.log("下拉菜单选中X/x，执行对应操作");
}

$(document).ready(function() {
  // 替换为你页面中下拉菜单的实际选择器
  const $targetSelect = $('#my-select');

  // 封装校验逻辑，复用初始化和事件监听场景
  const checkSelectedValue = () => {
    const selectedValue = $targetSelect.val().toLowerCase();
    if (selectedValue === 'x') {
      handleSelectTask();
    }
  };

  // 页面初始化时校验并执行
  checkSelectedValue();

  // 监听下拉菜单选项变化，校验后执行函数
  $targetSelect.on('change', checkSelectedValue);
});

注意事项 #

• 请将代码中的选择器（#my-checkbox/#my-select）替换为你页面中对应元素的实际选择器。
• 如果需要在状态不符合时执行反向操作，可在if分支后添加else逻辑处理。

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