如何用Checkbox隐藏当日歇业的餐厅Div？技术实现咨询

数据老陈

2026-5-19

Hey there! Let's build this checkbox toggle feature to hide restaurants closed today. I'll walk you through every part so it's easy to follow.

Step 1: Structure Your HTML Properly

First, we'll add a data attribute to each restaurant div to store its closing day (note: getDay() returns 0 for Sunday, 1 for Monday, up to 6 for Saturday—so we'll match those values here). We'll also add the toggle checkbox:

<!-- Toggle Checkbox -->
<label style="margin: 1rem 0; display: block;">
  <input type="checkbox" id="hideClosedToggle">
  Hide restaurants closed today
</label>

<!-- Restaurant List -->
<div class="restaurant-card" data-close-day="0">
  <h3>Mama's Pasta</h3>
  <p>Closed on: Sunday</p>
</div>
<div class="restaurant-card" data-close-day="2">
  <h3>BBQ Haven</h3>
  <p>Closed on: Tuesday</p>
</div>
<div class="restaurant-card" data-close-day="3">
  <h3>Sushi World</h3>
  <p>Closed on: Wednesday</p>
</div>
<div class="restaurant-card" data-close-day="5">
  <h3>Burger Palace</h3>
  <p>Closed on: Friday</p>
</div>
<div class="restaurant-card" data-close-day="0">
  <h3>Green Bistro</h3>
  <p>Closed on: Sunday</p>
</div>

The data-close-day attribute lets us easily link each restaurant to its closing day without messing with extra classes or IDs.

Step 2: Add the JavaScript Logic

Next, we'll write code to get today's day, listen for the checkbox toggle, and show/hide the relevant restaurants:

// Get today's day (0 = Sunday, 1 = Monday ... 6 = Saturday)
const today = new Date().getDay();

// Grab our checkbox and all restaurant elements
const toggle = document.getElementById('hideClosedToggle');
const restaurants = document.querySelectorAll('.restaurant-card');

// Listen for checkbox state changes
toggle.addEventListener('change', function() {
  restaurants.forEach(restaurant => {
    // Convert the data attribute value to a number
    const closeDay = parseInt(restaurant.dataset.closeDay);
    
    if (this.checked) {
      // Hide the restaurant if its close day matches today
      restaurant.style.display = closeDay === today ? 'none' : 'block';
    } else {
      // Show all restaurants when checkbox is unchecked
      restaurant.style.display = 'block';
    }
  });
});

Step 3 (Optional): Use CSS Classes for Cleaner Code

Instead of directly manipulating the display style, you can use a CSS class for better maintainability:

.hidden {
  display: none;
}

Then update the JavaScript to use class toggling:

toggle.addEventListener('change', function() {
  restaurants.forEach(restaurant => {
    const closeDay = parseInt(restaurant.dataset.closeDay);
    if (this.checked) {
      // Add/remove the hidden class based on the close day match
      restaurant.classList.toggle('hidden', closeDay === today);
    } else {
      // Remove the hidden class from all restaurants
      restaurant.classList.remove('hidden');
    }
  });
});

Extra Tip: Initialize on Page Load

If you want the closed restaurants to be hidden by default when the page loads, add this snippet to trigger the checkbox logic on page load:

window.addEventListener('load', function() {
  // Check the checkbox by default (optional)
  toggle.checked = true;
  // Trigger the change event to apply the hiding logic
  toggle.dispatchEvent(new Event('change'));
});

Just make sure the values in data-close-day perfectly match the return values of getDay()—don't use 7 for Sunday, since getDay() never returns that!

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