Как изменить текст радиокнопки

Question

У меня есть переключатель, который необходимо динамически обновлять с пользовательского ввода, но нормальные .val(), .text() и .html() не будут работать. Как изменить текст радио кнопки с помощью jQuery или обычного JavaScript?

Answer 1

У переключателя нет связанного с ним текста.

Но если у вас есть 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; 
    } 
}); 

Answer 2

Входной радио не имеет текст

Все это так:

<input type="radio" /> 

Answer 3

Если <label> был правильно связан с определенной кнопки радио с помощью for атрибут (как и должно быть) ...

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

... вы можете просто найти DOM для него, используя атрибут for. Использование JQuery:

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

Попробуйте in this fiddle.