Изменение текста метки, также содержит входной (флажок)

Question

У меня есть некоторые элементы в моем документе, как:

<div class="checkbox-inline"> 
    <label><input id="myinputid" value="False" type="checkbox"/>mytext</label> 
</div> 

я могу получить доступ получить текст с помощью:

$("#myinputid").parent().text(); 

Это возвращает mytext как я и надеялся. То есть:

$("#myinputid").parent().text("newtext"); 

Изменяет мой начальный элемент в

<div class="checkbox-inline"><label>newtext</label></div> 

Как я могу изменить часть текста, не снимая вход? Или мне нужно его восстановить?

Если у вас есть лучший способ структурировать мои флажки для начала, это будет приемлемой альтернативой.

Answer 1

(1) Использование «для» атрибута будет один вариант: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute

Поскольку <input> уже не дитя <label>, вход не будет зависеть от ваших изменений с text().

<div class="checkbox-inline"> 
    <label for="myinputid">mytext</label> 
    <input id="myinputid" value="False" type="checkbox"> 
</div> 

(2) Другим вариантом было бы реструктурировать как:

<div class="checkbox-inline"> 
    <label> 
    <span>mytext</span> 
    <input id="myinputid" value="False" type="checkbox"> 
    </label> 
</div> 

Затем вы можете изменить текст Пролет без изменения входного сигнала. Промежуток в ярлыке допускается согласно здесь: Is <div> inside <label> block correct?

(3) Здесь может быть возможным решением для исходного HTML структуры: jQuery - setting an element's text only without removing other element (anchor)

Answer 2

Вы можете поместить текст внутри элемента, например, интервал, а затем используйте функцию .siblings() вместо функции .parent().