如何更改單選按鈕的文本

Question

我有一個需要從用戶輸入動態更新的單選按鈕，但正常的.val() 、 .text()和.html()不起作用。 如何使用 jQuery 或普通 JavaScript 更改單選按鈕的文本？

Answer 1

收音機輸入沒有文字

一切都是這樣的：

<input type="radio" />

Answer 2

如果您的<label>已使用for屬性與特定單選按鈕正確關聯（應該如此）...

<form>
    <input type="radio" id="example" />
    <label for="example">Clickyclick</label>
</form>

...你可以使用for屬性搜索DOM。 使用jQuery：

<script>
    var yourElement = $("#example");
    var itsLabel = $("[for=" + yourElement.attr("id") + "]"); // <---
    itsLabel.css("color", "red");
</script>

試試這個小提琴 。

Answer 3

單選按鈕沒有與之關聯的文本。

但是如果你在無線電選項旁邊有一個label tag / span tag 。 然后你可以使用.next訪問該元素並更改其text/html

DEMO

HTML：

<input type="radio" /><label>Option 1</label>

要么

<input type="radio" /><span>Option 1</span>

JS：

var $label = $('input[type=radio]').next();
$label.text('Options'); 

或者您可以使用下面的黑客來更改無線電選項旁邊的文本。 請注意，以下代碼假定文本位於radio選項旁邊。

DEMO

var isRadioLabel = 0;
$('div').contents().each(function() {
    if (this.nodeName == '#text' && isRadioLabel == 1) {
        isRadioLabel = 2;
    }
    if (isRadioLabel == 2) {
        this.nodeValue = 'Options';
        isRadioLabel = 0;
    }
    if (this.type == 'radio') {
        isRadioLabel = 1;
    } else {
        isRadioLabel = 0;
    }
});

Answer 4

在 JS 中試試這個。

<label id=labId for=labId     onClick="changeText(this.id)">RADIO BUTTON TEXT</label>
<input type=radio />

<script type="text/javascript">"use strict";
const stat=["Old Radio Button Label Text","NEW RADIO BUTTON LABEL TEXT"];
let   cptr=0;

function changeText(button_id){
   var el = document.getElementById(button_id);
   el.firstChild.data = stat[cptr^=1];
}
</script>