基于单选框选择显示/隐藏Div的实现方案求助（Bootstrap环境）

Hey there! Let's get that radio button content toggle working with Bootstrap—since you already nailed the dropdown version, this is just a small tweak to adapt the logic for radio inputs.

First, make sure your radio buttons are grouped correctly (same name attribute so they're mutually exclusive) and linked to their target divs using a data-target attribute. We'll use Bootstrap's built-in d-none class to hide content by default.

Here's a clean example to reference:

<!-- Radio Button Group -->
<div class="form-check mb-2">
  <input class="form-check-input" type="radio" name="contentToggle" id="showContent1" data-target="#contentBlock1" checked>
  <label class="form-check-label" for="showContent1">
    Show Content Block 1
  </label>
</div>
<div class="form-check mb-2">
  <input class="form-check-input" type="radio" name="contentToggle" id="showContent2" data-target="#contentBlock2">
  <label class="form-check-label" for="showContent2">
    Show Content Block 2
  </label>
</div>

<!-- Target Content Divs -->
<div id="contentBlock1" class="d-none p-3 bg-light border rounded">
  This is the content that appears when Radio Button 1 is selected! 🎉
</div>
<div id="contentBlock2" class="d-none p-3 bg-light border rounded">
  And this is what shows up for Radio Button 2.
</div>

We'll use either jQuery (since Bootstrap often pairs with it) or vanilla JavaScript to listen for the radio button's change event and toggle the content visibility.

Option 1: jQuery Version #

// Wait for the DOM to load
$(document).ready(function() {
  // Listen for changes on the radio group
  $('input[name="contentToggle"]').on('change', function() {
    // Hide all content blocks first
    $('[id^="contentBlock"]').addClass('d-none');
    // Show the target block linked to the selected radio
    $($(this).data('target')).removeClass('d-none');
  });

  // Initialize: Show the content for the pre-selected radio (if any)
  const preSelected = $('input[name="contentToggle"]:checked');
  if (preSelected.length) {
    $($(preSelected.data('target'))).removeClass('d-none');
  }
});

Option 2: Vanilla JavaScript Version (No jQuery) #

document.addEventListener('DOMContentLoaded', function() {
  const radioButtons = document.querySelectorAll('input[name="contentToggle"]');

  // Function to handle content toggling
  function toggleContent() {
    // Hide all content blocks
    document.querySelectorAll('[id^="contentBlock"]').forEach(block => {
      block.classList.add('d-none');
    });
    // Show the target block
    const targetBlock = document.querySelector(this.getAttribute('data-target'));
    targetBlock.classList.remove('d-none');
  }

  // Attach event listeners to each radio button
  radioButtons.forEach(radio => {
    radio.addEventListener('change', toggleContent);
  });

  // Initialize pre-selected content
  const preSelected = document.querySelector('input[name="contentToggle"]:checked');
  if (preSelected) {
    const targetBlock = document.querySelector(preSelected.getAttribute('data-target'));
    targetBlock.classList.remove('d-none');
  }
});

• Radio Group Consistency: All radio buttons in the same group must share the same name attribute—otherwise, they won't behave as mutually exclusive options.
• Target Matching: The data-target value must exactly match the id of the content div (including the # prefix).
• Bootstrap Classes: We're using Bootstrap's d-none instead of custom CSS to stay consistent with the framework's utility classes.

This should mirror the functionality you had for dropdowns but tailored to radio buttons. Let me know if you hit any snags with your specific code!

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