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

【问题标题】：Modifying the text of a label that also contains an input (checkbox)修改还包含输入的标签的文本（复选框）
【发布时间】：2016-09-01 21:08:10
【问题描述】：

我的文档中有一些元素，例如：

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

如何在不删除输入的情况下更改文本部分？还是我必须重建它？

如果有更好的方法来构建我的复选框，那将是一个可以接受的替代方案。

【问题讨论】：

标签： javascript jquery twitter-bootstrap input label

【解决方案1】：

(1) 使用“for”属性是一种选择：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)

【讨论】：

谢谢，我选择了选项 2（并将跨度放在输入之后）并使用$("myinputid").next("span") 来获取跨度并更改其文本

【解决方案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");

【讨论】：