修改也包含输入的标签文本（复选框）

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）使用“for”属性是一个选项：Is <div> inside <label> block correct?

由于<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>

然后您可以在不修改输入的情况下更改范围的文本。根据此处允许标签内的跨度：jQuery - setting an element's text only without removing other element (anchor)

（3）这可能是您原始HTML结构的可能解决方案：

Answer 2

您可以将文本放在元素中，例如span，然后使用.siblings（）函数而不是.parent（）函数。

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

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