如何通过Javascript动态修改指定value属性的单选按钮显示文本

原生JavaScript实现代码 #

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 1. 定位到value为Paypal的目标单选按钮
  const targetRadio = document.querySelector('input[type="radio"][name="paymentmethod"][value="Paypal"]');
  if (!targetRadio) return; // 未匹配到对应元素时直接退出

  // 2. 查找单选按钮所属的外层label容器
  const parentLabel = targetRadio.closest('label.radio-inline');

  // 3. 遍历label子节点，匹配需要修改的文本节点
  for (let node of parentLabel.childNodes) {
    // nodeType=3代表文本节点，匹配含Paypal的文本后替换内容
    if (node.nodeType === 3 && node.textContent.trim().includes('Paypal')) {
      node.textContent = 'Paypal Global';
      break;
    }
  }
});

方案说明 #

• 属性选择器可精准匹配目标单选按钮，无需依赖id属性，完全符合给定的定位条件
• closest()方法可稳定向上查找最近的匹配label，不受单选按钮外层嵌套层级影响
• 遍历文本节点的修改方式不会改动label内已有的其他DOM元素（示例中的.iradio_square-blue容器、<ins>标签都不会被修改），不会破坏原有样式和交互逻辑

可选：jQuery实现（仅适用于项目已引入jQuery的场景） #

$(function() {
  const $targetLabel = $('input[type="radio"][name="paymentmethod"][value="Paypal"]').closest('label.radio-inline');
  // 过滤文本节点后替换内容
  $targetLabel.contents().filter(function() {
    return this.nodeType === 3 && $(this).text().trim().includes('Paypal');
  }).replaceWith('Paypal Global');
});

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