Question

$('.button').click(function(){
$('.title').text('ipsum');
});

.button{
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'>lorem</div>
</br>
<div class='button'>CLICK</div>

您会看到checkbox被删除。

如何仅更改title上的文本，即按原样保留一个复选框（是否选中）？

Answer 1

就像这样（假设您可以在文本周围添加一个跨度。这可以让您定位跨度。

$('.button').click(function(){
$('.title span').text('ipsum');
});

.button{
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'><span>lorem</span></div>
</br>
<div class='button'>CLICK</div>

您实际上可以使它与任何其他html元素一起使用，只要您可以使用选择器定位目标对象，就不必跨度。

注意：在注释中指出，最好为此使用标签而不是跨度，因为这是与表单元素一起使用的正确元素。您的标签如下所示：

<label for="myCheckboxIdHere">lorem<label>

，您的选择器将变为.title label

Answer 2

1。并非最佳方法，但是当前代码中的一种选择是将$('.title').html()替换为新的html()：

$('.button').click(function(){
$('.title').html($('.title').html().replace('lorem','ipsum'));
});

.button{
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'>lorem</div>
</br>
<div class='button'>CLICK</div>

2。。正确的方法是使用<label for="checkbox_id">Text</label>

<label>元素是少数几个元素之一，这些元素仅存在并且与另一个元素有意义。

要与另一个元素相关联，它必须包含一个for attribute，用于标识与其关联的<input>。 for attribute's值应与<input>元素的ID（而非名称）匹配。

$('.button').click(function(){
$('.title label').text('ipsum');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' id="checka" type='checkbox'><label for="checka">lorem</label></div>
</br>
<div class='button'>CLICK</div>

Answer 3

您应该在input上使用label来完成这项工作。

看下面的代码：

$('.button').click(function() {
  $('.checkbox-label').text('ipsum');
});

.button {
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
  <input id="check" type='checkbox'>
  <label for="check" class='checkbox-label'>lorem</label>
</div>
<br>
<div class='button'>CLICK</div>

Answer 4

只需将span类赋予要更改的文本元素

$('.button').click(function(){
$('.changeble_text').text('ipsum');
});

.button{
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
	<input class='checka' type='checkbox'>
	<span class="changeble_text">lorem</span>
   </div>
</br>
<div class='button'>CLICK</div>

如何仅更改div保留复选框的文本部分

4 个答案: