javascript - 如何仅按原样更改 div 保持复选框的文本部分

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