技术需求：从不同折叠面板选多复选框/单选按钮及自定义板球队选球员展示

Hey there! Let's tackle both of these features with clear, working code examples. I'll stick to vanilla HTML/CSS/JS so it's easy to adapt to any framework you're using.

First, let's set up the accordion structure with checkboxes and radio buttons. The core idea is to track every selection change and update a display area in real-time.

HTML Structure #

<!-- Accordion Container -->
<div class="accordion">
  <!-- Accordion Panel 1 -->
  <div class="accordion-panel">
    <button class="accordion-header">Preferences</button>
    <div class="accordion-content">
      <label><input type="checkbox" name="pref" value="dark-mode"> Dark Mode</label>
      <label><input type="checkbox" name="pref" value="notifications"> Enable Notifications</label>
      <label><input type="checkbox" name="pref" value="auto-save"> Auto Save</label>
    </div>
  </div>

  <!-- Accordion Panel 2 -->
  <div class="accordion-panel">
    <button class="accordion-header">Payment Method</button>
    <div class="accordion-content">
      <label><input type="radio" name="payment" value="credit-card"> Credit Card</label>
      <label><input type="radio" name="payment" value="paypal"> PayPal</label>
      <label><input type="radio" name="payment" value="upi"> UPI</label>
    </div>
  </div>
</div>

<!-- Selected Items Display -->
<div class="selection-display">
  <h3>Your Selections:</h3>
  <ul id="selected-items"></ul>
</div>

Basic CSS for Accordion #

.accordion-panel {
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion-header {
  width: 100%;
  padding: 12px;
  background: #f5f5f5;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
}

.accordion-content {
  padding: 12px;
  display: none;
}

.accordion-content.active {
  display: block;
}

.selection-display {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

JavaScript Logic #

// Toggle accordion panels
document.querySelectorAll('.accordion-header').forEach(button => {
  button.addEventListener('click', () => {
    const content = button.nextElementSibling;
    content.classList.toggle('active');
  });
});

// Track selections and update display
const selectedItemsList = document.getElementById('selected-items');

// Listen for changes on all checkboxes/radios
document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => {
  input.addEventListener('change', updateSelectionDisplay);
});

function updateSelectionDisplay() {
  // Clear existing list
  selectedItemsList.innerHTML = '';

  // Get all checked checkboxes
  const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  checkedCheckboxes.forEach(box => {
    const li = document.createElement('li');
    li.textContent = `${box.nextSibling.textContent.trim()} (${box.value})`;
    selectedItemsList.appendChild(li);
  });

  // Get selected radio button
  const selectedRadio = document.querySelector('input[type="radio"]:checked');
  if (selectedRadio) {
    const li = document.createElement('li');
    li.textContent = `Payment Method: ${selectedRadio.nextSibling.textContent.trim()} (${selectedRadio.value})`;
    selectedItemsList.appendChild(li);
  }
}

How it works: We first add accordion toggle functionality, then listen to every change event on our inputs. Whenever a selection is updated, we clear the display list, collect all checked checkboxes and the selected radio, then populate the list with those values.

For this feature, we'll have grouped player lists (by team), let users select multiple players, and display their custom team.

HTML Structure #

<!-- Team Player Groups -->
<div class="player-groups">
  <div class="team-group">
    <h3>India</h3>
    <div class="players">
      <label><input type="checkbox" class="player" data-team="India" value="Virat Kohli"> Virat Kohli</label>
      <label><input type="checkbox" class="player" data-team="India" value="Rohit Sharma"> Rohit Sharma</label>
      <label><input type="checkbox" class="player" data-team="India" value="Jasprit Bumrah"> Jasprit Bumrah</label>
    </div>
  </div>

  <div class="team-group">
    <h3>Australia</h3>
    <div class="players">
      <label><input type="checkbox" class="player" data-team="Australia" value="Steve Smith"> Steve Smith</label>
      <label><input type="checkbox" class="player" data-team="Australia" value="Pat Cummins"> Pat Cummins</label>
      <label><input type="checkbox" class="player" data-team="Australia" value="David Warner"> David Warner</label>
    </div>
  </div>
</div>

<!-- Custom Team Display -->
<div class="custom-team">
  <h3>Your Custom Cricket Team:</h3>
  <div id="team-players">
    <p>No players selected yet.</p>
  </div>
</div>

CSS Styling #

.player-groups {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.team-group {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px;
}

.players label {
  display: block;
  margin: 8px 0;
}

.custom-team {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

JavaScript Logic #

const teamPlayersDisplay = document.getElementById('team-players');

// Listen for player selection changes
document.querySelectorAll('.player').forEach(playerCheckbox => {
  playerCheckbox.addEventListener('change', updateCustomTeam);
});

function updateCustomTeam() {
  const selectedPlayers = document.querySelectorAll('.player:checked');
  
  if (selectedPlayers.length === 0) {
    teamPlayersDisplay.innerHTML = '<p>No players selected yet.</p>';
    return;
  }

  // Build team display
  let teamHtml = '<ul>';
  selectedPlayers.forEach(player => {
    teamHtml += `<li>${player.value} (${player.dataset.team})</li>`;
  });
  teamHtml += '</ul>';

  teamPlayersDisplay.innerHTML = teamHtml;
}

Key notes here: We use data-team attributes to keep track of which team each player belongs to. Every time a player is selected/deselected, we rebuild the team display with all chosen players, showing their name and team.

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