如何在jQuery中检测指定层级所有.checkbox添加checked类后执行函数

我希望实现当#section-1下所有.job-row-wrapper的子元素.check-box都添加了checked类时，执行某个自定义函数。尝试了多种写法均未成功，以下是对应的DOM结构和现有代码：

DOM结构 #

<!-- SECTION 1 -->
<div class="section-wrapper" id="section-1">
  <div class="job-row-wrapper-header" id="header-1">section title goes here</div>
  <div class="job-row-wrapper">
    <div class="job-row-column">title goes here</div>
    <div class="check-box"></div>
  </div>
  <div class="job-row-wrapper">
    <div class="job-row-column">title goes here</div>
    <div class="check-box"></div>
  </div>
  <div class="job-row-wrapper">
    <div class="job-row-column">title goes here</div>
    <div class="check-box"></div>
  </div>
  <div class="job-row-wrapper">
    <div class="job-row-column">title goes here</div>
    <div class="check-box"></div>
  </div>
</div>

现有代码 #

if ($("#section-1 > .job-row-wrapper > .check-box > .checked").length) {
 console.log("All checkboxes have the  class checked");
}

原代码问题分析 #

原选择器$("#section-1 > .job-row-wrapper > .check-box > .checked")逻辑错误：它试图查找.check-box的子元素中带有checked类的元素，但实际checked类是直接添加在.check-box元素本身上的，因此这个选择器永远找不到匹配项。

正确实现方式 #

1. 一次性检测（适用于页面加载后或特定事件触发时检查）

统计目标区域内.check-box的总数，再统计带有checked类的数量，两者相等时执行自定义函数：

// 获取所有目标复选框
const allCheckboxes = $('#section-1 .job-row-wrapper .check-box');
// 筛选出已添加checked类的复选框
const checkedCheckboxes = allCheckboxes.filter('.checked');

// 判断是否全部选中
if (allCheckboxes.length === checkedCheckboxes.length) {
  console.log('所有复选框都已添加checked类');
  // 执行你的自定义函数
  // yourCustomFunction();
}

2. 实时监听变化（适用于用户操作或动态修改类的场景）

如果checked类是通过用户点击或JS动态添加的，需要绑定事件或监听DOM变化来实时检测：

方式一：绑定点击事件

// 给每个.check-box绑定点击事件
$('#section-1 .job-row-wrapper .check-box').on('click', function() {
  const allCheckboxes = $('#section-1 .job-row-wrapper .check-box');
  const checkedCheckboxes = allCheckboxes.filter('.checked');
  
  if (allCheckboxes.length === checkedCheckboxes.length) {
    console.log('所有复选框都已添加checked类');
    // 执行自定义函数
    // yourCustomFunction();
  }
});

方式二：监听DOM类属性变化（MutationObserver）

如果checked类是通过其他JS逻辑动态添加的，使用MutationObserver监听类属性变化：

// 定义通用检测函数
function checkAllChecked() {
  const allCheckboxes = $('#section-1 .job-row-wrapper .check-box');
  const checkedCheckboxes = allCheckboxes.filter('.checked');
  
  if (allCheckboxes.length === checkedCheckboxes.length) {
    console.log('所有复选框都已添加checked类');
    // yourCustomFunction();
  }
}

// 给每个.check-box添加类属性监听
$('#section-1 .job-row-wrapper .check-box').each(function() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 仅当class属性变化时触发检测
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        checkAllChecked();
      }
    });
  });
  
  // 启动监听，监听属性变化
  observer.observe(this, { attributes: true });
});

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