为什么无法为checkbox相邻的span元素添加指定样式类？

DevOps 小满

2026-10-6

解决方案

核心问题排查

你的代码存在3个明显错误：

事件目标选择器错误：你写的.checkbox匹配不到元素，你的<input>没有设置class="checkbox"，所以事件根本不会触发
父级查找逻辑错误：closest("thead")是查找当前元素的祖先级thead，你的复选框在tbody内，不可能匹配到thead，自然找不到对应的span
范围选择过大：第二种写法直接查找整个tbody下的所有span，所以会统一修改所有行的样式

正确实现代码

基础版本（勾选后添加样式）

$("#courses").on('change', 'input[type="checkbox"]', function (){
  $(this).next('span').removeClass("is-link").addClass("is-success");
});

优化版本（勾选/取消勾选双向切换样式）

$("#courses").on('change', 'input[type="checkbox"]', function (){
  const $relatedSpan = $(this).next('span');
  if(this.checked) {
    $relatedSpan.removeClass("is-link").addClass("is-success");
  } else {
    $relatedSpan.removeClass("is-success").addClass("is-link");
  }
});