JQuery .text()完全删除了我的输入标签复选框

Question

我不认为我能用语言解释得太好,所以我为你们做了一个小提琴:

的jsfiddle

$(document).ready(function () {
	$("#clickMe").click(function(){
    $("#label1").text("test1234");
    $("#label2").text("test1234");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
	<li>
    <label id="label1">
      <input type="checkbox"/>
       Label 1
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id = "label2" for="checkbox_id">
      Label 2
    </label>
  </li>
</ul>

<button id="clickMe">
Click me
</button>

如您所见,我准备了一个由标签包围的输入复选框,以及一个通过for="..."功能分配标签的复选框.

我现在尝试更改两者上的标签文本.但是,周围的标签完全丢失了<input>它周围的标签.它完全消失了.

另一个很完美.

但是,我想让它以第一种方式工作.是否有可能实现这一目标？

Answer 1

安全,最好的办法是更换你的HTML添加一个<span>文本内容,并使用.text()在<span>:

$(document).ready(function () {
  $("#clickMe").click(function(){
    $("#label1 span").text("test1234");
    $("#label2 span").text("test1234");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label id="label1">
      <input type="checkbox"/>
      <span>Label 1</span>
    </label>
  </li>
  <li>
    <input type="checkbox" id="checkbox_id">
    <label id = "label2" for="checkbox_id">
      <span>Label 2</span>
    </label>
  </li>
</ul>

<button id="clickMe">
  Click me
</button>