如何用CSS实现单选框切换支付方式时同步切换提示文本？

问题描述 #

我有两个radio类型的支付选项，已实现选择不同支付方式时显示对应区块，但不知道如何同步切换下方「Precautions（注意事项）」区域的内容：选择现金支付时显示红色的现金提示文本，选择信用卡支付时显示蓝色的信用卡提示文本。请问能否仅通过CSS实现？若需依赖JS，代码应如何编写？

纯CSS实现方案 #

可以实现，但需要微调HTML结构并利用CSS的:checked伪类和通用兄弟选择器。核心逻辑是通过选中的radio控制后续兄弟元素（注意事项区域）内的内容显示状态。

修改后的HTML代码 #

<label class="radio">
  <input type="radio" value="cash" name="payment" id="cash-pay" checked>
  <div class="radio-list">
    <figure class="radio-sign">radio-sign</figure>
    <p>现金支付</p>
  </div>
  <div class="from-box">
    现金支付信息...
  </div>
</label>

<label class="radio">
  <input type="radio" value="credit" name="payment" id="credit-pay">
  <div class="radio-list">
    <figure class="radio-sign">radio-sign</figure>
    <p>信用卡支付</p>
  </div>
  <div class="from-box">
    信用卡支付信息...
  </div>
</label>

<div class="wrap">
  <h2>注意事项</h2>
  <ul class="cash_tips">
    <li>1. 现金支付注意条款</li>
    <li>2. 现金支付注意条款</li>
  </ul>

  <ul class="credit_tips">
    <li>1. 信用卡支付注意条款</li>
    <li>2. 信用卡支付注意条款</li>
  </ul>
</div>

补充的CSS规则 #

/* 保留原有CSS代码，新增以下规则 */
#cash-pay:checked ~ .wrap .cash_tips {
  display: block;
}
#cash-pay:checked ~ .wrap .credit_tips {
  display: none;
}

#credit-pay:checked ~ .wrap .cash_tips {
  display: none;
}
#credit-pay:checked ~ .wrap .credit_tips {
  display: block;
}

说明：给每个radio的input添加唯一ID，利用~通用兄弟选择器，当radio被选中时，控制后续.wrap容器内对应提示内容的显示/隐藏。默认选中现金支付的radio，确保初始状态正确。

JavaScript实现方案 #

如果不想调整原有HTML结构，可以通过JS监听radio的选择变化，动态切换注意事项内容的显示状态。

调整后的HTML（可选，添加value更严谨） #

<label class="radio">
  <input type="radio" value="cash" name="text" checked>
  <div class="radio-list">
    <figure class="radio-sign">radio-sign</figure>
    <p>Pay by cash</p>
  </div>
  <div class="from-box">
    Pay by cash info...
  </div>
</label>

<label class="radio">
  <input type="radio" value="credit" name="text">
  <div class="radio-list">
    <figure class="radio-sign">radio-sign</figure>
    <p>credit payment</p>
  </div>
  <div class="from-box">
    credit payment info...
  </div>
</label>

<div class="wrap">
  <h2>Precautions</h2>
  <ul class="cash_tips">
    <li>1.Cash Payment Notes Clause</li>
    <li>2.Cash Payment Notes Clause</li>
  </ul>

  <ul class="credit_tips">
    <li>1.Credit Payment Notes Clause</li>
    <li>2.Credit Payment Notes Clause</li>
  </ul>
</div>

JavaScript代码 #

// 获取所有支付选项的radio元素
const paymentRadios = document.querySelectorAll('input[name="text"]');
// 获取两个提示列表
const cashTips = document.querySelector('.cash_tips');
const creditTips = document.querySelector('.credit_tips');

// 切换提示内容的函数
function toggleTips() {
  const selectedValue = document.querySelector('input[name="text"]:checked').value;
  if (selectedValue === 'cash') {
    cashTips.style.display = 'block';
    creditTips.style.display = 'none';
  } else {
    cashTips.style.display = 'none';
    creditTips.style.display = 'block';
  }
}

// 初始加载时执行，确保状态正确
toggleTips();

// 给每个radio添加选择变化监听
paymentRadios.forEach(radio => {
  radio.addEventListener('change', toggleTips);
});

说明：通过监听radio的change事件，获取选中的radio的value值，动态设置对应提示列表的display属性，实现内容切换。如果不想修改原有HTML的value，也可以通过判断radio父元素的文本内容来区分，但用value的方式更稳定可靠。

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