如何更改单选按钮的文本

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>

试试in this fiddle。

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'); 

或者你可以使用下面的黑客来改变无线电选项旁边的文字。请注意，以下代码假定文本位于无线电选项旁边。

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;
    }
});