使用 JQuery 设置标签文本答案

【问题标题】：Set Label Text with JQuery使用 JQuery 设置标签文本
【发布时间】：2014-01-03 12:36:10
【问题描述】：

这应该很简单，但是下面的代码并没有做任何事情，只要改变下一个标签的文本。我曾尝试使用 .text、.html 等，但均无济于事。这段代码有什么问题吗？

<script type="text/javascript">
$(document).ready(function()
{
    $("input:checkbox").on("change", checkboxChange);

    function checkboxChange()
    {
        $("#"+this.id).next("label").text("TESTTTT");
    }
});
</script>



<td width="15%" align="center"><input type="checkbox" name="task1" id="task1"></td>
<td width="25%" align="center"><label for="task1"></label></td>

【问题讨论】：

这里放一些 HTML 代码
.next 仅适用于直系兄弟姐妹。您的 label 与您的 input 不在同一 DOM 级别。你最好在选择器中使用 for 属性
checkboxchange() 是一个函数...你忘了使用括号：P
@TusharGupta 不，他使用的是引用的函数，而不是这个函数的返回值

标签： javascript jquery html onchange

【解决方案1】：

复选框在td中，所以需要先获取父级：

$("input:checkbox").on("change", function() {
    $(this).parent().next().find("label").text("TESTTTT");
});

或者，找到一个标签，它的for 和id 相同（可能比反向遍历更高效）：

$("input:checkbox").on("change", function() {
    $("label[for='" + $(this).attr('id') + "']").text("TESTTTT");
});

或者，更简洁的是this.id：

$("input:checkbox").on("change", function() {
    $("label[for='" + this.id + "']").text("TESTTTT");
});

【讨论】：

@BrettPowell 你应该使用标签的 FOR 属性
this.id 可以，不用包装成jQuery对象
@A.Wolff：是的，我最初想展示问题并正在编辑答案以使用 for 显示。
所以现在你有一个完整的答案+1
这项工作很好。关于这种选择器和函数，你有什么书可以参考吗

【解决方案2】：

我只会查询 for 属性，而不是重复递归 DOM 树。

$("input:checkbox").on("change", function() {
    $("label[for='"+this.id+"']").text("TESTTTT");
});

【讨论】：

【解决方案3】：

你可以试试：

<label id ="label_id"></label>
 $("#label_id").html('value');

【讨论】：