动态更改单选按钮的文本

Question

我有一个场景，有一系列带有付款方式名称的单选按钮。我需要在页面加载时更改该文本。例如。

<label class="radio-inline">
  <div class="iradio_square-blue">
    <input type="radio" name="paymentmethod" value="Paypal">
    <ins></ins>
  </div>
  Paypal India
</label>

在上面的代码示例中，我需要通过 javascript 将 "Paypal India" 更改为 "Paypal Global"我们没有单选按钮的 ID，唯一的定位方式是通过单选按钮的值，在上面的例子中是 paypal。

谁能帮帮我。

提前致谢。

Answer 1

您需要查看子节点

const label = document.querySelector("[name=paymentmethod][value=Paypal]")
  .closest("label");
[...label.childNodes].forEach(node => {
  let text = node.textContent;
  if (text && text.includes("India")) {
    node.textContent = text.replace("India", "Global");
  }
});

<label class="radio-inline">
  <div class="iradio_square-blue">
    <input type="radio" name="paymentmethod" value="Paypal">
    <ins></ins>
  </div>
  Paypal India
</label>

Answer 2

在此供您参考。我认为这会有所帮助。

document.addEventListener("DOMContentLoaded", function(event) {
  const labels = document.getElementsByClassName('radio-inline');
  if (labels.length) {
    let label = labels[0];
    label.innerHTML = label.innerHTML.replace(/Paypal India/, 'Paypal Global');
  }
});

动态更改单选按钮的文本

Change the text of the radio button dynamically

javascript

jquery

replace

radio-button