修改也包含輸入（複選框）標籤的文本

Question

我有我的文檔中的某些元素，比如：

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

我可以訪問使用獲取文本：

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

這將返回正如我原本希望的那樣。那就是：

$("#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（）函數。

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

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