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

Question

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

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

我可以使用以下方法获取文本：

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

这 returns mytext 正如我所希望的那样。即：

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

将我的初始元素更改为

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

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

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

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

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");

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

Modifying the text of a label that also contains an input (checkbox)

javascript

jquery

label

input

twitter-bootstrap