单选框选中时显示外部div的代码结构问题求助

Got it, let's break down why your CSS isn't working once those .show divs move outside the radio button's parent container, then walk through practical solutions.

The Root Problem #

Your current CSS uses the general sibling selector (~), which only works for elements that share the same parent element and come after the target input. When you move the .show divs outside the radio buttons' parent <div class="col-sm-10">, they're no longer siblings of the #yes radio input—so the selector can't target them anymore.

Solution 1: JavaScript (Most Compatible) #

If you need support for older browsers, JavaScript is the safest bet. We'll add event listeners to the radio buttons to toggle the .show divs manually:

Updated HTML (adds optional IDs for cleaner targeting)

<div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
  <div class="col-sm-10">
    <div class="form-check form-check-inline">
      <input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
      <label class="form-check-label" for="yes"> Yes </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" name="radio" type="radio" id="no" value="no">
      <label class="form-check-label" for="no"> No </label>
    </div>
  </div>
</div>
<!-- These divs live outside the radio parent now -->
<div class="form-group row show" id="medicareNumber">
  <label for="" class="col-sm-2 col-form-label">Medicare Number</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>
<div class="form-group row show" id="medicareAddress">
  <label for="" class="col-sm-2 col-form-label">Medicare Address</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

JavaScript

// Grab elements we need to interact with
const yesRadio = document.getElementById('yes');
const noRadio = document.getElementById('no');
const showDivs = document.querySelectorAll('.show');

// Helper function to toggle visibility
function toggleShowDivs(shouldShow) {
  showDivs.forEach(div => {
    div.style.display = shouldShow ? 'block' : 'none';
  });
}

// Set initial state (hidden)
toggleShowDivs(false);

// Add change listeners to radio buttons
yesRadio.addEventListener('change', () => toggleShowDivs(true));
noRadio.addEventListener('change', () => toggleShowDivs(false));

Solution 2: CSS :has() Selector (Modern Browsers) #

If you only need to support modern browsers (Chrome, Firefox 121+, Safari), you can use the :has() pseudo-class. This lets you target a parent element based on its children's state, keeping everything in CSS:

CSS

.show {
  display: none;
}

/* Target the radio button's parent row when #yes is checked, then style sibling .show divs */
.form-group.row:has(#yes:checked) ~ .show {
  display: block;
}

Note: This works only if the .show divs are direct siblings of the radio button's parent .form-group.row. If they're nested deeper, adjust the selector path to match your HTML structure.

Solution 3: Adjust HTML Structure (If Possible) #

If you can rearrange your HTML to keep the .show divs inside the same parent as the radio buttons, your original CSS will work without changes. Just move them into the <div class="col-sm-10"> container:

Updated HTML

<div class="form-group row">
  <label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
  <div class="col-sm-10">
    <div class="form-check form-check-inline">
      <input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
      <label class="form-check-label" for="yes"> Yes </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" name="radio" type="radio" id="no" value="no">
      <label class="form-check-label" for="no"> No </label>
    </div>
    
    <!-- Move .show divs here, inside the same parent as radio buttons -->
    <div class="form-group row show">
      <label for="" class="col-sm-2 col-form-label">Medicare Number</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-group row show">
      <label for="" class="col-sm-2 col-form-label">Medicare Address</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
</div>

Original CSS (now functional)

.show {
  display: none;
}

input#yes:checked ~ div.show {
  display: block;
}

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