如何用jQuery多层遍历定位表格深层元素并设置checked属性为false？

看起来你需要在页面加载时自动调整表格的筛选状态，只保留"Pending"选项选中，同时隐藏其他状态的行。这里分几个步骤来实现，确保效果符合预期：

1. 确保代码在正确时机执行 #

首先要保证你的jQuery代码在DOM完全加载完成，且表格插件初始化完毕后运行。如果直接写在页面头部，可能会因为元素还没渲染或者插件还没初始化导致失效。推荐用$(window).load()或者插件自带的初始化回调（如果有的话）：

$(window).load(function() {
  // 后续代码放在这里
});

如果用$(document).ready()，要确认表格插件是在ready之前初始化的，否则可能需要调整代码顺序。

2. 调整复选框选中状态 #

你提到的选择器可以用来定位"Approved"的复选框，把它的checked设为false，同理处理"Denied"的复选框。注意要用prop()而不是attr()，因为checked是元素的状态属性，prop()能更准确地修改它：

// 取消"Approved"复选框的选中状态
$('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(1) > input').prop('checked', false);

// 取消"Denied"复选框的选中状态（假设它是第3个div里的input，根据你的DOM结构调整序号）
$('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(3) > input').prop('checked', false);

// 确保"Pending"复选框处于选中状态（可选，默认可能已选中，但保险起见）
$('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(2) > input').prop('checked', true);

3. 隐藏对应状态的行 #

直接隐藏"Approved"和"Denied"的行，你可以通过筛选表格行的状态列内容来实现：

// 遍历表格tbody的行，隐藏状态为Approved或Denied的行
$('#adminreview tbody tr').each(function() {
  var statusText = $(this).find('td:first-child').text().trim(); // 假设状态在第一列，根据实际结构调整
  if (statusText === 'Approved' || statusText === 'Denied') {
    $(this).hide();
  }
});

4. 触发插件的筛选事件（关键！） #

很多表格筛选插件需要手动触发筛选动作，才能让复选框的状态变化同步到表格显示。你可以触发复选框的change事件，让插件感知到状态变化并执行筛选：

// 触发状态列所有复选框的change事件
$('#adminreview > thead > tr > th:nth-child(1) .checkbox-container input').trigger('change');

完整代码示例 #

把这些步骤整合起来，最终代码大概是这样：

$(window).load(function() {
  // 调整复选框状态
  $('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(1) > input').prop('checked', false);
  $('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(3) > input').prop('checked', false);
  $('#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(2) > input').prop('checked', true);

  // 隐藏对应行
  $('#adminreview tbody tr').each(function() {
    var statusText = $(this).find('td:first-child').text().trim();
    if (statusText === 'Approved' || statusText === 'Denied') {
      $(this).hide();
    }
  });

  // 触发插件筛选
  $('#adminreview > thead > tr > th:nth-child(1) .checkbox-container input').trigger('change');
});

注意事项 #

• 如果你的DOM结构和假设的不一样（比如"Pending"不是第2个复选框），要根据实际的HTML结构调整选择器的nth-child序号。
• 有些插件可能有自己的API来设置筛选条件，比如官方的bootstrap-table插件可以直接用filterBy方法：

  $('#adminreview').bootstrapTable('filterBy', {
    status: 'Pending' // 这里的status是你的列字段名，根据实际调整
  });
  

  这种方式比手动改复选框和隐藏行更可靠，建议优先查看插件的官方文档有没有相关API。

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