jQuery复选框mouseenter/focus事件失效，如何实现搜索框触发勾选？

核心问题排查 #

你的代码里有几个关键错误导致功能失效：

• 选择器语法错误：$("#.website_checklist") 同时混用了id选择器#和类选择器.，应该改为$(".website_checklist")
• 过时的事件绑定方法：bind() 在jQuery 3.x中已被弃用，需替换为on()
• 勾选复选框后未同步UI样式：仅设置prop("checked", true)不会触发自定义的change事件逻辑，导致视觉样式不更新
• 缺少搜索框的focus事件绑定：只实现了mouseenter触发，没处理搜索框获得焦点的场景

修复后的完整代码 #

JavaScript部分

$(document).ready(function() {
  // 绑定mouseenter和focus事件到搜索框，触发勾选第一个复选框
  $("#sbox").on('mouseenter focus', function() {
    const $firstCheckbox = $("#item_0");
    if (!$firstCheckbox.prop("checked")) {
      $firstCheckbox.prop("checked", true);
      // 手动触发change事件，同步UI样式
      $firstCheckbox.trigger("change");
    }
  });

  // 替换bind为on，修正选择器
  $(".website_checklist").find(":checkbox").on("change", function() {
    $(this).parent().toggleClass("checked", this.checked);
  });

  $(".website_checklist").find(":checkbox").on("focus", function() {
    $(".focus").removeClass("focus");
    $(this).parent().addClass("focus");
  });

  setTimeout(function() {
    $("#calcsuccess").fadeOut("slow");
  }, 3000);

  $("#sbox").on("paste", function() {
    setTimeout(function() {
      $("#button-addon2").trigger("click");
    });
  });

  var value = $('#sbox').val();
  if (!$.trim(value) || value === null) {
    $('#button-addon2').hide();
    $('#image-upload').show();
  } else {
    $('#button-addon2').show();
    $('#image-upload').hide();
  }
});

function buttonChange(val) {
  if (val) {
    $('#button-addon2').show();
    $('#image-upload').hide();
  } else {
    $('#button-addon2').hide();
    $('#image-upload').show();
  }
}

HTML和CSS部分保持不变（你的原有代码无需修改）

关键修改说明 #

1. 合并事件绑定：把mouseenter和focus事件合并绑定到#sbox，一次处理两个触发场景
2. 修正选择器：将$("#.website_checklist")改为$(".website_checklist")，正确匹配类选择器
3. 替换bind为on：使用jQuery推荐的on()方法绑定事件，兼容新版本
4. 同步UI样式：勾选复选框后手动触发change事件，确保父元素的checked类被正确添加，视觉样式同步更新
5. 优化逻辑：增加判断，避免重复触发勾选操作

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