寻求JavaScript方案：提取选中单选框的img src并应用至指定图片元素

Got it, let's build this out properly. Below is a complete implementation that handles both the initial selected radio state and updates whenever the user picks a new option.

Step 1: Example HTML Structure #

First, let's assume your markup looks something like this (adjust classes/IDs to match your actual code):

<!-- Radio group with associated images -->
<div class="radio-options">
  <label>
    <input type="radio" name="image-select" value="option1" checked>
    <img src="images/option1.jpg" alt="Option 1">
  </label>
  <label>
    <input type="radio" name="image-select" value="option2">
    <img src="images/option2.jpg" alt="Option 2">
  </label>
  <label>
    <input type="radio" name="image-select" value="option3">
    <img src="images/option3.jpg" alt="Option 3">
  </label>
</div>

<!-- Target container where we'll display the selected image -->
<div class="selected-radio">
  <div>
    <img id="target-image" src="" alt="Selected Image">
  </div>
</div>

Step 2: JavaScript Implementation #

This script will handle initial setup and real-time updates:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Get references to key elements
  const radioGroup = document.querySelectorAll('input[name="image-select"]');
  const targetImage = document.getElementById('target-image');

  // Function to update the target image source
  function updateTargetImage(selectedRadio) {
    // Find the image associated with the selected radio (adjust selector if your markup differs)
    const selectedImg = selectedRadio.closest('label').querySelector('img');
    if (selectedImg) {
      targetImage.src = selectedImg.src;
      // Optional: Sync alt text for better accessibility
      targetImage.alt = selectedImg.alt;
    }
  }

  // Handle initial selected radio on page load
  const initialSelected = document.querySelector('input[name="image-select"]:checked');
  if (initialSelected) {
    updateTargetImage(initialSelected);
  }

  // Add change event listeners to all radio buttons
  radioGroup.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        updateTargetImage(this);
      }
    });
  });
});

Key Details to Note #

• Initial State Handling: We explicitly check for the :checked radio on page load and sync its image immediately—no user interaction required for the initial selection to take effect.
• Flexible Image Selection: Using closest('label').querySelector('img') makes the script resilient to minor markup changes (like if the image isn't a direct sibling of the radio button). Adjust the selector inside querySelector if your image has a specific class.
• Accessibility Bonus: Syncing the alt text ensures your content stays accessible for screen reader users—always a good practice.
• Dynamic Radio Groups: If your radio buttons are added/removed dynamically after page load, switch to event delegation on a parent container for more efficiency:

  // Event delegation for dynamic radio groups
  document.querySelector('.radio-options').addEventListener('change', function(e) {
    if (e.target.type === 'radio' && e.target.checked) {
      updateTargetImage(e.target);
    }
  });
  

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