多选Select全选联动逻辑实现求助：现有jQuery代码未生效

你的问题核心在于用错了事件类型，而且对表单元素选中状态的更新方式也不对——focus事件只是元素获得焦点时触发，和选项是否被选中完全无关；另外动态修改选中状态时，jQuery推荐用prop()而非attr()，后者只适合初始化时设置。

下面是完全符合你需求的实现代码：

<select id="carSelect" multiple>
  <option value="all-item" selected>All</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#carSelect').on('change', function() {
    const $selectBox = $(this);
    const $allOption = $selectBox.find('option[value="all-item"]');
    const isAllChecked = $allOption.is(':selected');
    const $otherOptions = $selectBox.find('option:not([value="all-item"])');

    // 情况1：选中了All选项，取消其他所有选项的选中状态
    if (isAllChecked) {
      $otherOptions.prop('selected', false);
      // 强制锁定All为选中状态，避免用户误操作同时选All和其他选项
      $allOption.prop('selected', true);
    } else {
      // 情况2：有其他选项被选中，自动取消All的选中状态
      const hasOtherChecked = $otherOptions.is(':selected');
      if (hasOtherChecked) {
        $allOption.prop('selected', false);
      }
    }
  });
});
</script>

关键细节说明： #

• 给下拉框加了id（carSelect），方便精准定位元素，你可以根据自己的页面结构修改这个id。
• 监听下拉框的change事件，这才是选中状态变化时的正确触发时机。
• 分两种核心场景处理：
  1. 当用户选中All时，直接清空其他选项的选中状态，同时确保All保持选中（防止用户同时勾选All和其他选项的冲突）。
  2. 当用户勾选任意非All选项时，自动取消All的选中状态。
• 用prop()更新选中状态：表单元素的selected是DOM属性，动态修改时必须用prop()才能正确同步页面显示和实际状态，attr()只适合初始化阶段设置。

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