咨询：点击单选按钮时修改Span文本为其Value值的实现方法

没问题，这事儿用原生JavaScript或者jQuery都能轻松搞定，我给你两种实用方案，先提个小细节：你目标span的class名里有空格，这不符合规范（空格代表多个类名），我先把它改成target-span方便后续选择，修正后的HTML结构如下：

<h2><span class="text-navy">Data Input - </span><span class="target-span">~</span></h2>
<label class="radio-inline"><input type="radio" name="team" value="CCP" id="1"/>CCP</label>
<label class="radio-inline"><input type="radio" name="team" value="WMP" id="2"/>WMP</label>

方案一：原生JavaScript实现 #

这种方案不需要依赖任何库，兼容性拉满：

// 获取所有name为team的单选按钮
const radioButtons = document.querySelectorAll('input[name="team"]');
// 获取目标span元素
const targetSpan = document.querySelector('.target-span');

// 给每个单选按钮绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 当单选按钮被选中时，修改span的文本为当前单选的value
    if (this.checked) {
      targetSpan.textContent = this.value;
    }
  });
});

说明：用change事件比click更靠谱，不管是鼠标点击还是键盘切换选中状态，都会触发这个事件，能覆盖更多交互场景。

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，代码会更简洁：

// 给所有name为team的单选按钮绑定change事件
$('input[name="team"]').on('change', function() {
  // 直接修改目标span的文本为当前选中单选的value
  $('.target-span').text($(this).val());
});

说明：jQuery的选择器和事件绑定语法更简洁，适合已经使用jQuery的项目，内部已经处理了各种兼容性问题，省心不少。

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