如何使用原生JavaScript显示选中的sessionDays复选框列表

Got it, let's tackle this. You already have the count of selected checkboxes sorted out—now we just need to grab the actual day names and display them in your HTML. Here's a straightforward, native JS solution tailored to your existing code:

Step 1: Add a Display Container #

First, add an element to your HTML where the selected days will show up. Place this right after your .sessionDays div:

<div id="selectedDaysSection">
  <h4>Selected Training Days:</h4>
  <div id="selectedDaysList"></div>
</div>

Step 2: Create the Update Function #

Write a reusable function that fetches checked boxes, extracts their day names, and renders the list:

function updateSelectedDays() {
  // Grab all checked checkboxes in the sessionDays group
  const checkedCheckboxes = document.querySelectorAll('.sessionDays input[type="checkbox"]:checked');
  const listContainer = document.getElementById('selectedDaysList');

  // Clear existing content to avoid duplicates
  listContainer.innerHTML = '';

  // Handle empty selection case
  if (checkedCheckboxes.length === 0) {
    listContainer.textContent = 'No days selected yet';
    return;
  }

  // Build an unordered list for the selected days
  const daysList = document.createElement('ul');
  
  checkedCheckboxes.forEach(checkbox => {
    // Find the matching label using the checkbox's ID (reliable since labels use `for` attribute)
    const dayLabel = document.querySelector(`label[for="${checkbox.id}"]`);
    // Trim extra whitespace from the label text
    const dayName = dayLabel.textContent.trim();

    // Create a list item and add it to the list
    const listItem = document.createElement('li');
    listItem.textContent = dayName;
    daysList.appendChild(listItem);
  });

  // Add the completed list to the display container
  listContainer.appendChild(daysList);
}

Step 3: Trigger the Function #

Make sure the list updates whenever a checkbox is toggled, and loads correctly on page load:

Option 1: Event Delegation (Cleaner, No HTML Changes) #

Add this to your JavaScript to listen for changes on any checkbox in the .sessionDays group—no need to edit each input's onclick attribute:

// Run once on page load to show initial selections
document.addEventListener('DOMContentLoaded', updateSelectedDays);

// Listen for checkbox changes and update the list
document.querySelector('.sessionDays').addEventListener('change', (e) => {
  if (e.target.type === 'checkbox') {
    updateSelectedDays();
  }
});

Option 2: Update Existing onclick Attributes #

If you prefer to stick with your existing inline handlers, just add updateSelectedDays(); to each checkbox's onclick:

<input class="form-check-input weekend" type="checkbox" value="1" id="sessionSunday" name="sessionDays" onFocus="startCalc();" onBlur="stopCalc();" onclick="resetMorning(); updateSelectedDays();">

This solution is lightweight, uses only native JS, and works seamlessly with your current HTML structure. It handles empty selections cleanly and ensures the list stays in sync with checkbox changes.

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