带全选功能的Checkbox失效及多Checkbox高亮逻辑异常问题

Hey there! Let's work through your two checkbox issues: getting the select-all functionality working, and implementing that specific highlighting behavior for checkboxes A, B, and C. I'll build on the CSS you provided to create a full, working solution.

1. First: Complete HTML Structure #

First, let's set up the HTML properly—making sure checkboxes are linked to their labels (so clicking the label triggers the checkbox):

<div id="checkboxes">
  <!-- Individual Checkboxes -->
  <label for="checkbox-a" class="a checkbox-label">A</label>
  <input type="checkbox" id="checkbox-a" name="checkbox-group" value="a">
  
  <label for="checkbox-b" class="a checkbox-label">B</label>
  <input type="checkbox" id="checkbox-b" name="checkbox-group" value="b">
  
  <label for="checkbox-c" class="a checkbox-label">C</label>
  <input type="checkbox" id="checkbox-c" name="checkbox-group" value="c">
  
  <!-- Select-All Checkbox -->
  <label for="checkbox-select-all" class="a checkbox-label">Select All</label>
  <input type="checkbox" id="checkbox-select-all" value="select-all">
</div>

2. Updated CSS (With Highlight Styles) #

I'll extend your existing CSS to add a highlight state, plus some small tweaks for better usability:

.a { 
  background-color: #ffffff; 
  font-family: Lato; 
  font-size: 11.2px; 
  font-weight: 500; 
  text-align: center; 
  color: #6a7c94; 
  padding: 2px; 
  width: 100px; 
  height: 34.2px; 
  margin-bottom: 15px; 
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  display: flex; /* Centers text vertically/horizontally */
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Shows users the label is clickable */
  transition: background-color 0.2s ease; /* Smooth highlight transition */
}

/* Highlight state - adjust colors to match your design! */
.a.highlight {
  background-color: #e3f2fd;
  color: #1976d2;
}

#checkboxes input[type=checkbox] { 
  display: none; 
}

3. JavaScript for Functionality #

This script handles both the custom highlighting logic and fixes the select-all feature:

// Grab elements we need
const groupCheckboxes = document.querySelectorAll('#checkboxes input[name="checkbox-group"]');
const selectAllCheckbox = document.getElementById('checkbox-select-all');
const checkboxLabels = {
  a: document.querySelector('label[for="checkbox-a"]'),
  b: document.querySelector('label[for="checkbox-b"]'),
  c: document.querySelector('label[for="checkbox-c"]')
};

// Handle individual checkbox clicks (for highlighting)
groupCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // Clear all highlights first
    Object.values(checkboxLabels).forEach(label => label.classList.remove('highlight'));
    
    // Apply highlights based on which checkbox is checked
    if (checkbox.value === 'a' && checkbox.checked) {
      checkboxLabels.a.classList.add('highlight');
    } else if (checkbox.value === 'b' && checkbox.checked) {
      checkboxLabels.a.classList.add('highlight');
      checkboxLabels.b.classList.add('highlight');
    } else if (checkbox.value === 'c' && checkbox.checked) {
      checkboxLabels.c.classList.add('highlight');
    }
    
    // Update select-all checkbox state
    updateSelectAllStatus();
  });
});

// Fix select-all functionality
selectAllCheckbox.addEventListener('change', () => {
  const shouldCheck = selectAllCheckbox.checked;
  groupCheckboxes.forEach(checkbox => {
    checkbox.checked = shouldCheck;
    // Trigger change event so highlighting logic runs
    checkbox.dispatchEvent(new Event('change'));
  });
});

// Update select-all checkbox to match group state
function updateSelectAllStatus() {
  const allChecked = Array.from(groupCheckboxes).every(box => box.checked);
  selectAllCheckbox.checked = allChecked;
}

Key Details to Note #

• Highlight Logic: Every time a checkbox is clicked, we first clear all highlights, then apply the correct ones based on your rules (click B = highlight A + B, etc.).
• Select-All Fix: When you click "Select All", it checks/unchecks all group checkboxes and triggers their change event—so the highlighting updates automatically. It also updates the select-all checkbox's state if you manually check/uncheck individual boxes.
• Usability Tweaks: Added cursor: pointer to labels and smooth transitions for highlights to make the UI feel more polished.

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