如何基于select与checkbox标签实现表格数据优先级筛选功能？

Got it, let's put together a clean, working implementation that handles both your priority filtering and select-all requirements. I'll break this down into HTML structure and JavaScript logic, with explanations along the way.

HTML Structure #

First, we'll set up the filter dropdown, select-all checkbox, and table. Each table row will have a data-priority attribute to map to the filter options—this makes it easy to match rows to the selected priority.

<!-- Filter Dropdown -->
<select id="priorityFilter">
  <option value="all">All Priorities</option>
  <option value="very important">very important</option>
  <option value="important">important</option>
  <option value="not so important">not so important</option>
</select>

<!-- Select-All Checkbox -->
<label>
  <input type="checkbox" id="selectAll"> Select All Visible Rows
</label>

<!-- Data Table -->
<table id="dataTable" border="1">
  <thead>
    <tr>
      <th>Select</th>
      <th>Task</th>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr data-priority="very important">
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>Finish project deadline</td>
      <td>very important</td>
    </tr>
    <tr data-priority="important">
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>Schedule team meeting</td>
      <td>important</td>
    </tr>
    <tr data-priority="not so important">
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>Organize desk</td>
      <td>not so important</td>
    </tr>
    <tr data-priority="very important">
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>Client feedback follow-up</td>
      <td>very important</td>
    </tr>
  </tbody>
</table>

JavaScript Logic #

Next, we'll add the functionality for both features using vanilla JavaScript (no library dependencies needed).

// Get DOM elements
const filterSelect = document.getElementById('priorityFilter');
const selectAllCheckbox = document.getElementById('selectAll');
const tableRows = document.querySelectorAll('#dataTable tbody tr');
const rowCheckboxes = document.querySelectorAll('.rowCheckbox');

// Priority Filter Function
function filterRowsByPriority() {
  const selectedPriority = filterSelect.value;
  
  tableRows.forEach(row => {
    const rowPriority = row.dataset.priority;
    // Show row if selected priority matches or "All" is chosen
    if (selectedPriority === 'all' || rowPriority === selectedPriority) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  });
  
  // After filtering, update select-all state to match visible rows
  updateSelectAllState();
}

// Select-All Function
function toggleSelectAll() {
  const isChecked = selectAllCheckbox.checked;
  // Only target checkboxes in visible rows
  const visibleRowCheckboxes = document.querySelectorAll('#dataTable tbody tr:not([style*="display: none"]) .rowCheckbox');
  
  visibleRowCheckboxes.forEach(checkbox => {
    checkbox.checked = isChecked;
  });
}

// Update Select-All checkbox state based on visible rows
function updateSelectAllState() {
  const visibleRowCheckboxes = document.querySelectorAll('#dataTable tbody tr:not([style*="display: none"]) .rowCheckbox');
  if (visibleRowCheckboxes.length === 0) {
    selectAllCheckbox.checked = false;
    return;
  }
  
  // Check if all visible checkboxes are checked
  const allChecked = Array.from(visibleRowCheckboxes).every(checkbox => checkbox.checked);
  selectAllCheckbox.checked = allChecked;
}

// Event Listeners
filterSelect.addEventListener('change', filterRowsByPriority);
selectAllCheckbox.addEventListener('change', toggleSelectAll);

// Sync select-all state when individual row checkboxes are toggled
rowCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateSelectAllState);
});

// Initialize filter to show all rows on page load
filterRowsByPriority();

Key Features Explained #

• Priority Filtering: We use the data-priority attribute to directly match rows to the selected filter option. When the dropdown changes, we loop through all rows and show/hide them based on the selection.
• Select-All for Visible Rows: The select-all checkbox only affects rows that are currently visible (not hidden by the filter). This ensures users don't accidentally select hidden rows they can't see.
• Sync Between Filter and Select-All: After filtering, we automatically update the select-all checkbox's state to reflect whether all visible rows are checked—this prevents confusion and keeps the UI consistent.

This implementation is lightweight, works in all modern browsers, and is easy to modify if you need to add more priorities or adjust the table structure.

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