使用JQuery设置标签文本

Question

这应该相当简单，但是以下代码似乎并没有改变下一个标签的文本。我已经尝试使用.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>

- user470760

---

在这里放置一些HTML代码。 - Khamidulla

.next仅适用于直接兄弟元素。您的“label”与您的“input”不在同一DOM级别上。最好使用选择器中的“for”属性。 - CodingIntrigue

checkboxchange() 是一个函数...你忘记使用括号了 :P - Tushar

@TusharGupta 不是，他正在使用被引用的函数，而不是这个函数的返回值。 - A. Wolff

Answer 1

复选框位于一个中，所以需要先获取其父元素：

复选框位于一个td中，所以需要先获取其父元素：

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

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

$("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");
});

- Abhitalks

---

@BrettPowell 你应该使用 label 的 FOR 属性。 - A. Wolff

this.id 很好，不需要将其包装为 jQuery 对象。 - CodingIntrigue

@A.Wolff：是的，我最初想要展示这个问题，并且正在编辑答案以使用for循环展示。 - Abhitalks

现在您有一个完整的答案 +1 - A. Wolff

这个工作得很好。你有没有推荐任何关于这种选择器和函数的书籍？ - sun

@sun：你可能想从这里开始：http://www.learningjquery.com/ 虽然不是一本书，但整个网站可以作为一个5mb的下载文件提供。 - Abhitalks

Answer 2

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

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

- CodingIntrigue

Answer 3

你可以尝试：

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

- red