如何用jQuery让Bootstrap Select全选、取消全选按钮支持Tab聚焦

现有代码错误点 #

• 类名参数未加引号：document.getElementsByClassName()的入参需要是字符串类型，你直接写bootstrap-select、bs-select-all会被识别为未定义变量，直接抛出引用错误。
• jQuery对象调用错误：(this).hasClass('open')写法错误，原生DOM对象没有hasClass方法，需要转为jQuery对象，改为$(this).hasClass('open')。
• 交互逻辑无效：仅给元素加focus-visible类不能让元素支持Tab聚焦，这个类是浏览器聚焦元素时自动添加的样式类，不会改变元素的可聚焦属性。
• 事件绑定不稳定：用click事件判断open类的方式容易受bootstrap-select内部状态变化影响，官方提供了专门的下拉框展开事件shown.bs.select，可靠性更高。
• 选择器范围错误：document.getElementsByClassName('bs-select-all')会选中页面所有实例的全选按钮，多下拉框场景下会出现逻辑冲突，应该只选中当前展开的下拉框内的对应按钮。
• 遗漏取消全选按钮：取消全选按钮类为bs-deselect-all，你当前的代码完全没有处理这个元素。

修正后代码 #

// 监听所有bootstrap-select多选实例的展开事件
$('.selectpicker').on('shown.bs.select', function () {
  // 找到当前实例对应的全选、取消全选按钮
  const $actionBtns = $(this).next('.bootstrap-select').find('.bs-select-all, .bs-deselect-all')
  // 设置tabindex为0，让元素进入Tab聚焦序列
  $actionBtns.attr('tabindex', 0)
  // 如果需要展开后默认聚焦到全选按钮，可加下面这行
  // $actionBtns.eq(0).focus()
})

内容的提问来源于stack exchange，提问作者Karina Schlosser-Gaulin